html - div 没有一直 float 到顶部

Question

我使用带有 6 个面板的 bootstrap3 创建了一个页面，3 个 col-md-4 和 3 个 col-md-8。 3 col-md-4 应该向左浮动，3 col-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-md-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 没有正确 float

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