css - 使用 twitter 引导程序自动浮动

Question

我在 a 中有一系列元素row-fluid，span12它们是span4. 我希望能够根据需要输出尽可能多的这些，并让它们自动排列在 3 列中。我遇到的问题是这种情况发生了，但是有一个偏移量（未清除的浮动偏移量）。

有没有办法做到这一点而不计算每个盒子和每第三个关闭前一行并开始一个新的？

        <div id="content" class="clearfix row-fluid">

            <div id="main" class="span12 clearfix" role="main">

                <div class="row-fluid">
                    <div class="span4">Test</div>
                    <div class="span4">Test</div>
                    <div class="span4">Test</div>
                    <div class="span4">Test</div>
                    <div class="span4">TEst</div>
                </div>



            </div>


        </div>

Answer 1

如果您的盒子高度不同，这实际上是不可避免的。您可以使用Masonry jQuery 插件解决这个问题。

否则，您可以为您的盒子使用固定高度。

发生这种情况是因为浮动元素脱离了正常的 HTML 文档流，并且当某些元素比其兄弟元素高时默认为这种行为。