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

如何使用浮动DIV的CSS解决此问题，如照片中所示：

在我的例子中，红色DIV后面的DIV-s不会在它周围浮动

我已在此表单中创建了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>

---

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

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

---

您可以放入

浮动：

任何参数都更适合您。

您可以将左侧和右侧分别包装在

div

标记中，如下所示：

编辑：更新问题的更新示例。您可能需要全屏观看堆栈片段

*编辑2：我想知道为什么它在jsfiddle（）上工作，而不是作为堆栈代码段，所以我没有将代码段更改为某种workadround，而是决定在这里不做任何更改。相反，我将解释为什么会发生这种情况。在JSFIDLE上，下面的自定义CSS在引导的CSS之后应用，并且由于它被称为层叠样式表，自定义样式被引导覆盖。 另一方面，在jsfidlle中，首先应用引导CSS，因此在本例中，自定义行覆盖引导CSS，并且可以工作

如果有人能在评论中向我解释一下，为什么bootstrap

float:left

语句不起作用，但是自定义的

float:left事实上，这将是伟大的


.blue{
边框：10px实心#fff；
背景：蓝色；
高度：150像素；
浮动：左；
}
瑞德先生{
边框：10px实心#fff；
背景：红色；
高度：300px；
浮动：对；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.红色，.蓝色{
浮动：无；
}
}

您可以试试这个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>


大家好，欢迎来到StackOverflow。请花些时间阅读帮助页面，特别是命名和的部分。更重要的是，请阅读。您可能还想了解有关感谢的信息，但它们默认是在一个父div中创建的，我喜欢像在照片中一样浮动子div-s。在您更新问题后，我更新了我的答案，请查看这是否是所需的结果：）编辑：它在JSFIDLE上有效，但不作为堆栈。正在处理它（）