如何在高度较大的一个div周围浮动小高度的div

Question

如何使用浮动DIV的CSS解决这个问题，如照片：

在我的情况下，DIV-s在红色DIV之后不会浮动它。

我已经以这种形式创建了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

只需在样式css中使用参数：

<div style="float: inside"></div>

您可以更好地输入float:任何适合您的参数。

Answer 2

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

编辑：更新了更新问题的示例。您可能需要在Fullscreen中观看Stack Snippet。

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

如果有人可以在评论中向我解释，为什么bootstrap float: left语句不起作用，但是自定义float: left;实际上没有用，那就太棒了！

＆＃13;

＆＃13;

.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;
   }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以尝试这个Html

<div class="outer">
<div c3ass="row">
  <div class="col-lg-6 col-sm-12 col-md-6" style="background-color:red;height:100px;border:1px solid black;">
  </div>
  <div class="col-lg-6 col-sm-12 col-md-6" style="background-color:red;height:100px;border:1px solid black;">
  </div>

</div>
<div class="row">

<div class="col-lg-6 col-sm-12 col-md-6">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12" style="background-color:red;height:100px;border:1px solid black;">

</div>
<div class="col-lg-12 col-sm-12 col-md-12"style="background-color:red;height:100px;border:1px solid black;" >

</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-md-6">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12" style="background-color:pink;height:200px;border:1px solid black;">

</div>
</div>
</div>
</div>


</div>