Question

我正在制作一个水平卷轴画廊风格的网站，类似于这个： http://ericryananderson.com/book_2

我有一个父div，并且在该div中是图库中每个项目的子div。

由于我不知道图库中将有多少项目/将随着时间的推移而改变，我如何自动创建父div大小，使图库项目保持在同一行，允许内容溢出屏幕的宽度，就像我上面引用的网站一样。

如果我手动设置宽度，它目前只会按照我想要的方式运行。

HTML：

<div class="parent-gallery-div">
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    ...
</div>

CSS：

.parent-gallery-div {
   height: 500px;
   float: left;
   margin-top: 40px;
}

.gallery-item {
   height: 420px;
   float: left;
   margin-right: 20px
}

Answer 1

尝试使用jScrollPane插件http://jscrollpane.kelvinluck.com/来实现此目的这是一个例子： http://longinstudio.pl/realizacje/reklama%20zewnetrzna

用法相对简单，看起来比http://ericryananderson.com解决方案更好。（f.e可以控制滚动外观和动画效果）

Answer 2

如果您想将高度增加为自动。

试试这段代码

<div class="parent-gallery-div">
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    ...
    <div style="clear:both;"></div>
</div>

并删除“parent-gallery-div”的高度属性

展开父div宽度以适合儿童div，水平滚动网站

2 个答案: