Question

我想以横向方式而非垂直方式代表新闻网站的新闻。当有人打开页面时，他们应该看到几篇文章，而不是向下滚动，文章列表应向左或向右滚动。在平板电脑上看起来应该很酷，因为它会给你一种感觉，就像你滚动图片一样，它也有在Windows 8中看到的新闻阅读器应用程序的感觉。（例如：http://blog.jasedigitalmedia.com/wp-content/uploads/2011/10/Windows-8-Metro-News-Reader-550x413.png）

我的新闻文章有一个设定的宽度，但高度可能会根据帖子的长度而有所不同。我希望它们对齐，当它们到达父div的末尾时，它们应该向右旋转并从那里继续，这与 WPF WrapPanel 的方向设置非常相同垂直。

这就是我现在拥有的（盒子有蓝色背景，以便更容易看到边界）

Current Version http://img546.imageshack.us/img546/6629/27149541.png

这就是我想要的（基于上图的Photoshop模型）：

Future Version http://img522.imageshack.us/img522/4974/41526451.png

回顾一下并清理一下，这是我的代码

我的HTML布局＆amp;代码

div #wrap：占用浏览器窗口的完整宽度
div＃newswrap：在#wrap里面，托管我的新闻项目的宽度非常大，横向滚动条

div.post：一个固定宽度的帖子

<div id="wrap">
<div id="newswrap">
   <div class="post">
    <div class="title">Lorem Ipsum Dolor</div>
    <div class="postcontent"><p>Lorem ipsum *text text*</p></div>
   </div>

   <div class="post">
    <div class="title">Lorem Ipsum Dolor</div>
    <div class="postcontent"><p>Lorem ipsum *text text*</p></div>
   </div>
</div>
</div>

和CSS：

    #wrap
    {
    width:100%;
    height:500px;
    background-color: rgba(0,0,0,0.5);
    overflow:scroll;
    overflow-y:hidden;
    }

    #newswrap
    {
    width:2500px;
    height:500px;
    }


    .post
    {
    width: 300px;
    float: left;
    /* display:inline-block; */
    background: rgba(0,0,120,0.5);
    padding: 10px;
    margin: 30px 0px 30px 30px; 
    }

我尝试使用display：inline-block但它也没有用。看起来很简单，但我似乎无法找到办法。一些帮助将不胜感激。

其他问题 我可以使用jQuery / JS捕获滚动事件，这样当我向下滚动时，newswrap会滚动吗？我尝试使用$（“＃”）。mousewheel功能，但它似乎没有滚动（虽然它在使用警报测试时确实触发了事件）

Answer 1

将您的CSS改为此

    #wrap
{
width:100%;
height:500px;
background-color: rgba(0,0,0,0.5);
overflow:scroll;
overflow-y:hidden;
}

#newswrap
{
width:2500px;
height:500px;
text-align: center;
}


.post
{
width: 300px;
/* display:inline-block; */
background: rgba(0,0,120,0.5);
padding: 10px;
margin: 30px 0px 30px 30px; 
}

这应该可以解决问题，清除display：inline-block引起的额外间隔，然后确保消除html中每个.post之间的空格。

Answer 2

使用CSS3功能，您可以使用列（http://www.quirksmode.org/css/multicolumn.html）并对每个元素使用column-break-inside: avoid;以将它们保存在块中。（您将需要针对这些CSS属性的浏览器特定定义。）但是，这在旧版浏览器中不起作用。

创建类似于WPF的WrapPanel（Webdesign）的水平布局

我的HTML布局＆amp;代码

2 个答案: