css - Css divs对齐布局

Question

我对 css divs 对齐有疑问。我认为对齐方式不正确。现在在左边，最好居中。

http://bit.ly/VOqkhw

我尝试使用 div ".post" 和浮动但不起作用。有可能解决这个问题吗？

谢谢。

Answer 1

这样的布局通常需要大量使用 Javascript。实现您想要的方法之一是创建 N 列并使用 JS 动态填充它们 + 使用 @media 查询隐藏/显示列。在这种情况下，HTML 会是这样的：

<div class="content">
    <div class="column">
        <div class="post">
        ...
        </div>
        <div class="post">
        ...
        </div>
    </div>
    <div class="column">
        <div class="post">
        ...
        </div>
        <div class="post">
        ...
        </div>
    </div>
</div>

在$(window).resize()(jQuery) 上，您将添加或删除s 并根据它们的宽度和高度column重新排列s。post你会使用媒体查询来设置显示列的宽度，就像这样：

@media all and (max-width:1000px) {
    .column{width:50%;} /*that would make two equal columns
    when the screen width <=1000 */
}

@media all and (max-width:1500px) {
    .column{width:33.3333%;} /*that would make three equal columns
    when the screen width <=1500 */
}

.post {width:100%;}
.column {float:left;}

如果您提供更多详细信息 - 您将获得更详细的答案和更少的反对票。

Answer 2

也许尝试将 div 后包装器放在 foliogrid div 中，然后在 foliogrid 上放置一个文本对齐中心。