javascript - 如何在一个高度大的div周围 float 高度小的div

Question

我怎样才能像照片中那样使用 float DIV 的 CSS 解决这个问题:

在我的例子中，红色 DIV 之后的 DIV-s 不会围绕它 float 。

我以这种形式创建了 div:

<div class="outer">
  <div class="col-lg-6 col-sm-12 col-md-6">
  </div>
  <div class="col-lg-6 col-sm-12 col-md-6">
  </div>
  <div class="col-lg-6 col-sm-12 col-md-6">
  </div>
  <div class="col-lg-6 col-sm-12 col-md-6">
  </div>
  <div class="col-lg-6 col-sm-12 col-md-6">
  </div>
</div>

Answer 1

您可以将左侧和右侧包裹在单独的 div 标记中，如下所示:

编辑:更新问题的更新示例。您可能需要全屏观看 Stack Snippet。

*编辑 2:我想知道为什么它在 jsfiddle ( https://jsfiddle.net/6z4orL6b/ ) 上工作，而不是作为 Stack Snippet，所以我没有将我的 Snippet 更改为某种 workadround，而是决定不在这里更改任何内容。相反，我将解释为什么会发生这种情况。在 JSFiddle 上，下面的自定义 CSS 在来自 Bootstrap 的 CSS 之后应用，并且由于它被称为 Cascading 样式表，自定义样式被 Bootstrap 覆盖。另一方面，在 jsfidlle 中，首先应用 Bootstrap CSS，因此在这种情况下，自定义行会覆盖 bootstrap CSS，并且可以正常工作。

如果有人可以在评论中向我解释，为什么 Bootstrap float: left 语句不起作用，但自定义 float: left; 实际上可以，它会很棒!

.blue {
   border: 10px solid #fff;
   background: blue;
   height: 150px;
   float: left;
}

.red {
   border: 10px solid #fff;
   background: red;
   height: 300px;
   float: right;
}

@media screen and (max-width: 768px) {
   .red, .blue {
      float: none;
   }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="outer">
  <div class="col-lg-6 col-sm-12 col-md-6 blue">
  </div>
  <div class="col-lg-6 col-sm-12 col-md-6 blue">
  </div>
  <div class="col-lg-6 col-sm-12 col-md-6 blue">
  </div>
  <div class="col-lg-6 col-sm-12 col-md-6 red">
  </div>
  <div class="col-lg-6 col-sm-12 col-md-6 blue">
  </div>
</div>