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

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

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

我想创建这个：

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

此外，我还有一些我不知道如何解决的事情......例如如果存在必须滚动的实际内容（如果没有图像，则不应该存在scollbar），滚动条或每个.horizontal应该出现。

谢谢你的帮助

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

Answer 1

从您发布的模型中，我收集了这个：

即使标记的每个图像都在自己的段落中，您也希望它们在同一行中显示内嵌。
您希望该容器具有水平滚动条。
当图片的总宽度超过容器宽度时，图片应使用所述滚动条，不包裹到多行上。

这样的布局可以使用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

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

html + css：水平滚动通道？

2 个答案: