div不会一直浮动到顶部

Question

我使用bootstrap3创建了一个页面，其中有6个面板，3ol-md-4和3colmd-8。3列-md-4应该向左浮动，3列-md-8应该向右浮动，但它们中的每一个都有一个存在的条件(因此页面上并不总是有6个面板)。

当所有6个都接近时，布局是这样的：

[col-md-4(1)][  col-md-8(1)  ]
[col-md-4(2)][  col-md-8(2)  ]
[col-md-4(3)][  col-md-8(3)  ]

例如，如果col md-4(1)丢失，则布局如下所示：

[col-md-4(2)][  col-md-8(1)  ]
[col-md-4(3)][  col-md-8(2)  ]
             [  col-md-8(3)  ]

但是每个面板在最大值上只有1“级别”，例如，如果col 4(1)和(2)丢失，布局将如下所示：

             [  col-md-8(1)  ]
[col-md-4(3)][  col-md-8(2)  ]
             [  col-md-8(3)  ]

那么，堆叠这些面板以使其正常工作的正确方法是什么？

我在另一篇文章中看到了一个答案，它给出了这个“修复”：

HTML

<div id="container">
    <div id="left">
        <div id="first"></div>
        <div id="second"></div>
    </div>
    <div id="right">
        <div id="third"></div>
        <div id="fourth"></div>
    </div>
</div>

CSS

#left {
    float: left;
}
#right {
    float: right;
}

但当我尝试使用它时，结果是：

[col-md-4(1)]
[col-md-4(2)]
[col-md-4(3)]
[  col-md-8(1)  ]
[  col-md-8(2)  ]
[  col-md-8(3)  ]

col md-8不能正确浮动

Answer 1

不，你不应该这样做，我得到的是你希望所有值为4的列都在左边，所有值为8的列都在右边？

你可以查看我刚才做的这个链接：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-md-4">
    This is col-md 4
  </div>
  <div class="col-md-8">
    This is col-md-8
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    This is col-md 4
  </div>
  <div class="col-md-8">
    This is col-md-8
  </div>
</div><div class="row">
  <div class="col-md-4">
    This is col-md 4
  </div>
  <div class="col-md-8">
    This is col-md-8
  </div>
</div><div class="row">
  <div class="col-md-4">
    This is col-md 4
  </div>
  <div class="col-md-8">
    This is col-md-8
  </div>
</div>

CSS

.col-md-4
{

  background-color: lightblue;
}
.col-md-8
{
  background-color: pink;
}

这是链接

http://codepen.io/Rehman/pen/WxaGbE