Как я могу заставить мой div отображать в блоке?

Question

Я новичок в этом форуме, поэтому извините, если я задам тривиальный вопрос. Я пытаюсь разработать веб-сайт с темой, в которой загружается Bootstrap.

Я быстро научился его использовать, но с некоторыми блоками возникает проблема выравнивания, и я не могу найти, где проблема.

Вот что ожидается (схематическая):

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 с загрузочным «clearfix» классом после того, как вы потянули правую и левую DIVs для решения этой проблемы с float css.

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

Решение: http://jsfiddle.net/fwbxbua8/