时间戳

首页 > 解决方案 > 如何使两个左浮动div不重叠？

html - 如何使两个左浮动div不重叠？

问题描述

我有一个主 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>

标签： htmlcss

解决方案

不要使用浮动。它会破坏一切的秩序。相反，对主容器使用 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>

推荐阅读