html - 并排Divs？

我想在Bootstrap中将Div 1,2和3保留在左侧（或不使用bootstrap），但是当我向div1中添加文本或高度增加时，div3移至右侧（我想将div3保留在左侧）。

这是bootply example.



Text3（div3）应该在左侧。

我也将float:left;添加到div中，但是没有用。

我怎样才能解决这个问题？

的HTML

<div class="container">
    <div class="col-md-6">
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
       Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
    </div>
    <div class="col-md-6">
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
    </div>
    <div class="col-md-6">
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
    </div>
</div>

的CSS

.container{
    border:1px solid #ff0000;
}
.col-md-6{
    float:left;
}

最佳答案

只需使用Bootstrap的.row类，如下所示：

Bootply-DEMO

<div class="container">
  <div class="row">
        <div class="col-md-6">
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
           Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
        </div>
        <div class="col-md-6">
          Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
          Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
          Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
        </div>
  </div>
  <div class="row">
        <div class="col-md-6">
          Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
          Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
          Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
        </div>
    </div>
</div>