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 的 100% 位于 #page-wrap 内部。因此它们在彼此下方对齐。我希望所有图像在 .horizo​​ntal 内并排放置。每个通道应该有一个单独的滚动条，让我滚动浏览图像。

我想创建这个：

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

此外，我还有一些不知道如何解决的问题...例如，如果存在必须滚动的实际内容，则滚动条或每个 .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 和标记的演示（放置图像的宽度/高度限制以使其在小窗口中显示得更好）： net/TT9hq/" rel="nofollow">http://jsfiddle.net/TT9hq/

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

Answer 2

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

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