html+；水平滚动条？

真正的simpel标记：

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

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

现在，图像不会浮动，因为with of.HONORIONAL是100%在#换页内。因此，它们在彼此下方对齐。我希望所有的图片都是并排的。水平的。每个车道都应该有一个单独的滚动条，让我可以滚动图像

我想创建以下内容：

你知道怎么解决这个问题吗

此外，我还有一些事情我不知道如何解决。。。e、 g.如果有需要滚动的实际内容，则滚动条或每个.horizontal应出现（如果没有图像，则滚动条不应出现）

谢谢你的帮助

---

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

首先，不要将图像包装在

p

中，如果希望它们都在同一行中，请尝试将它们放在跨距中。或者，不要将它们放在任何东西中，并在它们上设置

display:inline

样式。至于滚动问题，只需在该容器div上设置

overflow-x:auto

，而不是

overflow-x:scroll

---

编辑：如果必须将它们保存在

p

s中，请将

display:inline

放在

p

s上

从您发布的模型中，我收集到以下信息：

即使标记在其自己的段落中有每个图像，您也希望它们以内联方式显示在同一行中

您希望该容器具有水平滚动条

图像应使用所述滚动条，当其总宽度超过容器的宽度时，不要缠绕到多行上

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

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

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

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

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

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

下面是一个使用上述CSS和标记的演示（图像上的宽度/高度限制被删除，以使其在小窗口中更好地显示）：

---

如果滚动条仅在有足够（宽）的图像需要滚动条时才显示，则将

overflow-x:scroll

替换为

overflow-x:auto

问题是，我正在与wordpress合作，wp正在将图像自动包装到p。这就是为什么我将所有样式设置为

.horizontal p

，然后尝试在

p

标记上设置

display:inline

。