Question

我一直有这个问题，因为这个问题，我避免浮动 div。该代码似乎有效，但是当您检查 Google 开发人员工具中的代码时，它显示 Main div 的高度为 0px。我遇到的问题是，如果我希望 Main div 具有图像或颜色，该怎么办。我发现让这个工作的解决方案是对每个 div 应用一个浮点数，这样 Main 也会得到一个浮点数，但浮动主 div 会破坏主容器的居中。有没有人知道修复主 div 之外的两个 div 的方法？

.float-left {
  float: left;
}

.float-right {
  float: right;
}

main {
  width: 100%;
  height: auto;
  background-color: darkgray;
}

.div1 {
  height: 200px;
  width: 50%;
  background-color: darkgreen;
}

.div2 {
  height: 200px;
  width: 50%;
  background-color: darkblue;
}

<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet" type="text/css">

<main>
  <div class="div1 float-left"></div>
  <div class="div2 float-right"></div>
</main>

为什么我的子 div 在父 div 之外溢出？

0 个答案: