html - 为什么两个 float div 一个一个地站在另一个下面？

Question

为什么第二个 div 在第一个下面？它们都是“ float ”元素。当我设置第二个 div 的宽度时，一切正常。但我希望这两个 div 位于一行。

.one {
  background-color: green;
  float: left;
  border: 1px solid green;
}
.two {
  float: left;
  background-color: red;
  border: 1px solid red;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>

Answer 1

这是因为您没有定义 float 元素的宽度。如果您定义了一个 max-width，例如 50%，它们将不再位于同一行。我建议提供 max-width 而不是 width，因为我相信您不想为元素提供静态 width。此外，它们应该灵活地占用尽可能多的空间，除非它们不应该相互混淆，这种情况发生在 50% 之后。

.one {
  background-color: green;
  float: left;
  border: 1px solid green;
  max-width: 50%;
}
.two {
  float: left;
  background-color: red;
  border: 1px solid red;
  max-width: 50%;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>