为什么实现不了等高布局-慕课网

为什么实现不了等高布局

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

SakrA_T

2016-12-03 22:31

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

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

写回答关注

2回答

写代码的阿木木

2017-02-25 21:42:43

是的，只能左边随着右边

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