html + CSS : horizontal scroll lanes?

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;
}

我不知道如何在不使用实际框架的情况下创建像下面的模型一样的水平“框架”。

现在，图像不会 float ，因为 .horizo​​ntal 的 with 100% 在#page-wrap 内部。所以它们在彼此下方对齐。我希望所有图像在 .horizo​​ntal 中并排放置。每个 channel 都应该有一个单独的滚动条，让我可以滚动浏览图像。

我想创建这个:

知道如何解决这个问题吗？

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

谢谢你的帮助

顺便说一句。我在我的元素中使用 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 如果滚动条仅在有(宽)足够图像需要滚动时显示酒吧。