html + css：水平滚动通道？

Question

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

我的CSS是这样的：

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

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

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

我不知道我怎么可以创建horzizontal“帧”之类的实体模型下方，而不会使用实际帧。

眼下，图像不浮动，因为与.horizo​​ntal的是100％＃页包裹物内。所以它们彼此对齐。我希望所有图像在.horizo​​ntal内并排排列。每个车道应该有一个单独的滚动条，让我滚动浏览图像。

我想创建这样的：

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

而且我有一些事情我不知道该如何解决？例如滚动条或每个.horizo​​ntal应该只是出现，如果有一个必须滚动（如果没有图像scollbar不应该存在）的实际内容

感谢你的帮助

BTW。我在我的项目中使用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风格。至于你的问题的滚动，只需设置overflow-x: auto对div容器代替overflow-x:scroll

编辑：如果你必须让他们在p S，穿上p小号display:inline。