为什么实现不了等高布局

源自：7-1 7. border在布局中的应用

为什么实现不了等高布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border实现等高布局</title>
<style type="text/css">
h3{
margin: 0;
padding: 0;
border: 0;
font-size: 18px;
}
.box{
width: 300px;
font: bold 18px/50px "Microsoft YaHei";
border-left: 300px solid #333;
background-color: #eee;
}
.left{
float: left;
width: 300px;
line-height: 50px;
margin-left: -300px;
color: #ccc;
}
</style>
</head>
<body>
<div>
<nav>
<h3>导航1</h3><h3>导航1</h3><h3>导航1</h3><h3>导航1</h3>
</nav>
<section>
<div>模块1</div>
</section>
</div>
</body>
</html>

为什么结果是这个样子？？

提问者：SakrA_T 2016-12-03 22:31

个回答

写代码的阿木木

2017-02-25 21:42:43

是的，只能左边随着右边

0

qq_小朱: 2016-12-04 16:59:46

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border实现等高布局</title>
<style type="text/css">
h3{
margin: 0;
padding: 0;
border: 0;
font-size: 18px;
}
.box{
width: 300px;
font: bold 18px/50px "Microsoft YaHei";
border-left: 300px solid #333;
background-color: #eee;
}
.left{
float: left;
width: 300px;
line-height: 50px;
margin-left: -300px;
color: #ccc;
}
</style>
</head>
<body>
<div class="box">
<nav class="left">
<h3>导航1</h3>
</nav>
<section>
<div class="module">模块1</div>
<div class="module">模块1</div>
<div class="module">模块1</div>
</section>
</div>
</body>
</html>

你的理解错误，是左边的高度随着右边的高度变化