如何使两个左浮动div不重叠？答案

【问题标题】：How to make two left floating divs not overlap?如何使两个左浮动div不重叠？
【发布时间】：2020-05-11 17:35:06
【问题描述】：

我有一个主 div，它涵盖了所有网站。在里面我有两个 div，都带有 CSS 属性 float: left。左边的 div 较小，高度小于右边的高度，右边的 div 与左边的重叠。正确渲染右侧 div 上的文本，直到内容的长度大于左侧 div 的高度，然后文本粘在左侧。我试过位置：绝对，但它没有用。我希望这张图片能解释我的问题并显示我想要得到的东西。

.left-div {
  margin: 25px;
  float: left;
}

.right-div {
  float: left;
  margin: 25px;
  justify-content: center;
}

<div className="main-container">
  <div className="left-div" /> content of left div
</div>
<div className="right-div">
  content of right div
</div>
</div>

【问题讨论】：

请添加您的 HTML 和 CSS 代码，最好在 Stack Snippet 中。
您添加的代码没有您描述的问题。如果我修复了 HTML 中的拼写错误，代码会按照您希望的方式运行，直到正确的 div 变为 wide。然后整个 div 最终位于左 div 下方。但是正确的 div 变高并没有让它像在你的图像中那样包裹。

标签： html css

【解决方案1】：

使用 Flex 布局

.main-container {
  display: flex;
  flex-direction: row;
}
.left-div {
  flex:1
}
.right-div {
  flex:1
}

<div class="main-container">
  <div class="left-div" > content of left div
</div>
<div class="right-div">
  content of right div
</div>
</div>

【讨论】：

【解决方案2】：

不要使用浮动。它会破坏一切的秩序。相反，对主容器使用 display flex。或者，如果您不想使用 flex，请将 display inline-block 提供给您的 div。这比浮动好。

.main-container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
}

.left-div {
  margin: 25px;
  border: 1px solid #a5a5a5;
  padding: 5px;
  height: 100px;
  width: 40%;
  margin: 0 5px;
}

.right-div {
  margin: 0 5px;
  justify-content: center;
  border: 1px solid red;
  padding: 5px;
  height: 250px;
  width: 60%;
}

<div class="main-container">
  <div class="left-div"> content of left div </div>
  <div class="right-div">
    content of right div
  </div>
</div>

【讨论】：