Question

我创建了帖子两个coloumn六个帖子。当帖子内容不相等时，下一个帖子框不能在左边浮动。我尝试在每两个盒子上添加clearfix类。但无法解决这个问题。我尝试在第二个框后浮动工作创建clearfix元素。最后，我想清除没有标记的fix。问题图片：

<div class="row">
    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>
    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>
    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>
    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>
    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>
    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>
</div><!-- /.row -->

这个解决方案正常工作但是我想修复没有标记。

<div class="row">

    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>
    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>

    <div class="clearfix"></div>

    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>
    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>

    <div class="clearfix"></div>

    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>
    <div class="col-xs-6">
        <article>
            <figure>
                <a href="" title=""><img src="picture.jpg" alt=""></a>
            </figure>
            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
        </article>
    </div>

    <div class="clearfix"></div>

</div><!-- /.row -->

Answer 1

先生。 Alien的答案用于清除容器中的浮动元素（您也可以在包含元素上使用'overflow：hidden'），但是您的问题基于不同的高度浮动元素（基于文本的长度），而不是像您期望的那样堆叠

以下是您可以使用的几种解决方案：

设置每个浮动元素的高度。如果它们的高度相同，那么您将不会遇到任何清除问题，但是您可能已经剪切了文本。如果您知道图像和文本永远不会超过一定的大小，则此解决方案最佳。

.col-xs-6 {
    height: 150px; /* or an arbitrary number you need */
}

您还可以使用第n个子CSS选择器2n + 1来定位每个其他元素，从第三个元素开始，并清除其浮动。

.col-xs-6:nth-child(2n+1) {
    clear: left;
}

在这两种情况下，我建议为样式添加不同的类，不建议直接将样式应用于bootstrap网格，最好将结构与表示分开。

Answer 2

如果你能够使用jquery，这是通过jquery的解决方案。

<script>
$(document).ready(function(e) {
    $('.row .col-xs-6:odd').each(function(index, element) {
        var ele = $(element);
        $('<div class="clearfix"></div>').insertAfter(ele);
    });
});
</script>

如何清除没有标记的第2列帖子？

2 个答案: