Question

为什么第二个div会在第一个？它们都是“浮动”元素。当我设置第二个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

这是因为你没有定义浮动元素的宽度。如果您定义max-width，例如50%，则它们将不再位于同一行。我建议max-width与width形成鲜明对比，因为我相信你不想给这些元素一个静态的width。此外，他们应该灵活地采取他们想要的空间，除非他们不应该互相混淆，这发生在50%之后。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用flex而不是float。为容器添加display: flex;。第一个div为flex: 0 0 auto;，第二个为flex: 1 1 auto;。 flex: 0 0 auto;表示该元素将占用所需的空间。 flex: 1 1 auto;表示该元素将占用所有可用空间。

＆＃13;

.container {
  display: flex;
}

.one {
  flex: 0 0 auto;
  background: red;
}

.two {
  flex: 1 1 auto;
}

＆＃13;

<div class="container">
  <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>
</div>

＆＃13;

Answer 3

你可以给它们一些％的宽度选项，或使用calc CSS函数的像素，就像这样......

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

我认为Flexbox是你真正想要的，漂浮是伟大的，但总是感觉像黑客而不是真正的解决方案。

您可以在所有浏览器中使用flexbox，IE8无法处理它，但不再支持浏览器了。我建议你在w3schools上阅读它们，它们通常都有很好的教程。

＆＃13;

.flex-container {
  display: flex;
}
.one,
.two {
  padding: 5px;
}
.one {
  background-color: green;
  border: 1px solid green;
}
.two {
  background-color: red;
  border: 1px solid red;
}
html,
body {
  margin: 0;
}

＆＃13;

<div class="flex-container">
  <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>
</div>

＆＃13;

至于为什么它会发生漂浮，除非你说否则任何显示块将占用分配的整个空间，这是100％，其中一个div占用100％没有空间另一个在同一条线上。

你可以给它一个设定的宽度，或者将显示更改为内联并从.two中删除左边的浮动（虽然这看起来有点奇怪）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

为什么两个浮动div在一个又一个？

4 个答案: