html + css:水平滚动通道？

Question

非常简单的标记:

<div id="page-wrap">

    <div class="post horizontal">

        <h2>Headline 01</h2>

        <div class="entry">
            <p>Lorem ipsum dolor...</p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
        </div>
    </div>

    <div class="post horizontal">

        <h2>Headline 02</h2>

        <div class="entry">
            <p>Lorem ipsum dolor...</p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
        </div>
    </div>

</div>

我的CSS看起来像这样:

.horizontal {
    overflow-x:scroll;
    clear:both;
}

.horizontal p {
    float:left;
    width:500px;
    padding:0 20px 20px 0;
}

.horizontal p.image {
    width:1024px;
}

我不知道如何在不使用实际帧的情况下创建类似于模型的水平"框架".

现在,图像不会浮动,因为.horizo​​ntal的内容是#page-wrap内部的100%.所以他们在彼此之下对齐.我希望所有图像都在.horizo​​ntal中并排.每个泳道都应该有一个单独的滚动条,让我滚动图像.

我想创建这个:

不知道怎么解决这个问题？

此外,我还有一些我不知道如何解决的问题...例如滚动条或每个.horizo​​ntal应该只在有实际内容必须滚动时出现(如果没有图像,则scollbar不应该是那里)

谢谢您的帮助

顺便说一句.我在我的项目中使用jquery,这只能用js吗？

Answer 1

从您发布的模型中，我收集到：

1. 即使标记将每个图像放在自己的段落中，您也希望它们在同一行内内联显示。

2. 您希望该容器有一个水平滚动条。

3. 图像应该使用所述滚动条，当它们的总宽度大于容器的宽度时，不要换行成多行。

这种布局可以使用 CSS 来实现，如下所示：

.horizontal p.image {
    display: inline;         /* 1 */
}

.entry {
    overflow-x: scroll;      /* 2 */
    white-space: nowrap;     /* 3 */
}

这是一个使用上述 CSS 和标记的演示（对图像进行宽度/高度限制，以使其在小窗口中显示得更好）： http: //jsfiddle.net/TT9hq/

如果滚动条仅在有（宽）足够的图像需要滚动条时才显示，则替换overflow-x: scroll为。overflow-x: auto