Question

我正试图制作一些博客。流体布局，主要将每个“盒子”堆叠在一起。我创建了一个CSS类，将每个“框”浮动到左侧。我已经玩了几天几天，并被迫 - 在这个网站上查看其他用户的问题几个月后 - 将我的第一个问题发布到stackoverflow.com，希望有一个有新思维的人可以解决我的问题。 / p>

我知道我当前的CSS使用（浮动）不是我想要做的答案。然而，这是我能够向您传达我想要做的图形概念的最简单方法。以下是图片链接，以便更好地向您展示我所说的内容：http://img824.imageshack.us/img824/2067/97o9.png

正如你所看到的那样，因为我使用比其他人更长的float: left盒子会阻止较小的盒子一直到达左侧。我的问题是：我如何能够创建这个3列流体布局，并允许高和短盒子一起使用和在不同的列中使用。我非常感谢能得到的任何帮助。我对这个问题缺乏细节表示歉意。

作为参考，在包含每个单独框的div类下面：
的 CSS

.blogPositioner {
        width: 300px;
        height: auto;
        overflow: hidden;
        float: left;
        padding-left: 16px;
        padding-right: 16px;
}

Answer 1

尝试jQuery Masonry它的工作原理是根据可用的垂直空间将元素放置在最佳位置

Answer 2

而不是浮动，为什么不尝试显示：inline-block？

Answer 3

你可以尝试

display: inline-block;

首先，看看它是否有帮助...

但是，如果您要查找3列，则应更改或确保html中包含3列（div列）。

假设你有三个主要的div组成列。他们的CSS可能就像这样

   div-left {
              float: left;
              display: inline-block;
              width: 33%;
            }
     div-center {
              float: left;
              display: inline-block;
              width: 34%;
            }
        div-right {
             float: left;
            display: inline-block;
            width: 33%;
         }

如果您希望每列的大小大致相同，则上面的代码就是如此。或者如果您希望中心div为页面的60％，只需将宽度：60％作为中心，然后将20％作为左右div。

Answer 4

这种情况正在发生，因为您的div具有可变高度，只需在每个第三个div之后使用<div style="clear:both; width:100%"></div>。

浮动div没有移动到的问题

4 个答案: