为什么两个浮动div都站在另一个之下？

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%之后。

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

Answer 2

可以使用弹性，而不是浮动。 为容器添加display: flex;。第一格为flex: 0 0 auto;，第二格为flex: 1 1 auto;。 flex: 0 0 auto;表示元素将根据需要占用尽可能多的空间。 flex: 1 1 auto;表示该元素将占用所有可用空间。

.container { 
 
    display: flex; 
 
} 
 

 
.one { 
 
    flex: 0 0 auto; 
 
    background: red; 
 
} 
 

 
.two { 
 
    flex: 1 1 auto; 
 
}

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

Answer 3

能不能给他们一些％宽度的选择，或利用像素计算CSS功能，这样的事情...

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

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

Flexbox是你真正想要的东西，我认为，浮动很棒，但总是觉得自己像一个反对的黑客编辑成真正的解决方案。

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

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

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

至于为什么它与浮动发生的事情，除非你说，否则任何显示块会占用分配的整个空间，这是100％，与申报单的一个占用100 ％在同一行上没有空间供另一个人使用。

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

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

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