                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之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>

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

03:07

SakrA_T

2016-12-03

源自：CSS深入理解之border 7-1

关注问题我要回答

1228

操作

收起

3 回答

慕函数6590268
2022-04-03

正确，加油，希望课程对你有帮助。

0 回复有任何疑惑可以回复我~

收起回答

写代码的阿木木
2017-02-25

是的，只能左边随着右边

0 回复有任何疑惑可以回复我~

收起回答

qq_小朱
2016-12-04

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