css - 我如何强制我的 div 显示在 block 中？

Question

我是这个论坛的新手，如果我问一个无关紧要的问题，请原谅。我尝试开发一个主题使用 Bootstrap purchased 的网站。

我很快就学会了如何使用它，但是有些 block 存在对齐问题，我找不到问题出在哪里。

这是预期的(示意图):

http://image.noelshack.com/fichiers/2015/38/1442431886-1.png

这就是我实际拥有的:

http://image.noelshack.com/fichiers/2015/38/1442431875-sans-titre.png

这是我的 html 代码(添加了一些 css):

<div class="col-sm-6 col-md-6">
    <div class="thumbnail">
        <!-- First player -->

        <div class="caption">
            <h1 class="text-center">Nolife de la semaine</h1><img alt="..."
            src="http://image.noelshack.com/fichiers/2015/38/1442431132-default-skin.png" style=
            "display: block; margin-left: auto; margin-right: auto;">

            <h3 class="text-center">ilies91</h3>

            <h4 class="text-center">34 heures de jeu</h4>
        </div><!-- Second player -->

        <div class="caption text-center">
            <div class="pull-left"><img alt="..." src=
            "http://image.noelshack.com/fichiers/2015/38/1442431133-first4ever.png" style=
            "display: block;width: 85px; height: 85px; text-align:center"></div>

            <div class="pull-left" style="margin-left:10px;">
                <h5>Hannibal</h5>

                <h6>28 heures de jeu</h6>
            </div>
        </div><!-- Third player  -->

        <div class="caption text-center">
            <div class="pull-left"><img alt="..." src=
            "http://image.noelshack.com/fichiers/2015/38/1442431133-luciole.png"></div>

            <div class="pull-left" style="margin-left:10px;">
                <h5>Lucioledeeper</h5>

                <h6>16 heures de jeu</h6>
            </div>
        </div>

        <p class="text-center"><a class="btn btn-primary btn-sm" href=
        "http://forum.nimeria.fr/">Voir le classement général</a></p>
    </div>
</div>

这里有什么问题吗？抱歉发了这么长的帖子。

谢谢。

Answer 1

您可以在右拉和左拉 DIV 之后使用带有 Bootstrap “clearfix”类的 DIV 来解决此 css float 问题。

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

解决方案:http://jsfiddle.net/fwbxbua8/