我希望 #first 与 #container 的左侧对齐，而 #second 与右侧对齐。
为此，我在 #first 上使用 float: left;，在 #second 上使用 float: right; .
但是，这会导致 #first 对齐 #container 的左侧，而 #second 紧挨着它。为什么会这样，我怎样才能实现我想要的？
这就是我想要的:
这是我得到的:
这是我的代码:
<head>
<style>
#container {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
}
#first {
float: left;
}
#second {
float: right:
}
</style>
</head>
<body>
<div id="container">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
</div>
</body>最佳答案
好吧好吧。无需创建 :after 属性来包含 float ，只需在容器上使用 overflow: hidden;。
<head>
<style>
#container {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
}
#first {
float: left;
}
#second {
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
</div>
</body>关于html - 使用 float 将 div 与父 div 的左右边缘对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40599658/