為什么實(shí)現(xiàn)不了等高布局
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>border實(shí)現(xiàn)等高布局</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>導(dǎo)航1</h3><h3>導(dǎo)航1</h3><h3>導(dǎo)航1</h3><h3>導(dǎo)航1</h3>
</nav>
<section>
<div>模塊1</div>
</section>
</div>
</body>
</html>為什么結(jié)果是這個(gè)樣子？？
2017-02-25
是的，只能左邊隨著右邊
2016-12-04
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>border實(shí)現(xiàn)等高布局</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>導(dǎo)航1</h3> </nav> <section> <div?class="module">模塊1</div> <div?class="module">模塊1</div> <div?class="module">模塊1</div> </section> </div> </body> </html>你的理解錯(cuò)誤，是左邊的高度隨著右邊的高度變化