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 的 with 100% 在 #page-wrap 内。所以它们在彼此下方对齐。我希望所有图像在 .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。

Answer 2

首先，如果您希望它们都在同一行中，请不要将图像包装在 p 中，请尝试将它们放在跨度中。或者，不要将它们放在任何东西中并在它们上设置display:inline 样式。至于您的滚动问题，只需在该容器 div 上设置 overflow-x: auto 而不是 overflow-x:scroll

编辑：如果您必须将它们保存在 ps 中，请将 display:inline 放在 ps 上。