我想在一个 div 中显示两个 div(header-logo 和 nav-menu)。一个向右漂浮，另一个向左漂浮。
每个 div 都是固定宽度 (100px)。
第二个 div 移到 head-banner 之外。我无法弄清楚为什么内容会溢出 head-banner。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.head-banner{
background: cyan;
//overflow:hidden;
}
.header-logo{
width: 100px;
background:yellow;
float:left;
}
.nav-menu{
background:green;
width:100px;
float:right;
}
</style>
</head>
<body>
<div class='head-banner'>
<div class='header-logo'>
div1
</div>
<div class='nav-menu'>
div2
</div>
</div>
</body>
</html>编辑
我看不到 .head-banner 的颜色。我认为 header-logo 和 nav-menu 都被推出了。
如果我隐藏 head-banner 的 overflow，它会按预期工作。
我想知道为什么会这样。
最佳答案
你错过了 float:left 的标志。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.head-banner{
background: cyan;
overflow:hidden;
}
.header-logo{
width: 100px;
background:yellow;
float:left;
}
.nav-menu{
background:green;
width:100px;
float:right;
}
</style>
</head>
<body>
<div class='head-banner'>
<div class='header-logo'>
div1
</div>
<div class='nav-menu'>
div2
</div>
</div>
</body>
</html>关于html - 为什么即使在指定宽度后内容也会在 div 中溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44498735/