我就这样写为什么不行呢-慕课网

首页课程实战体系课手记专栏慕课教程

我就这样写为什么不行呢

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

qq_爱伤屋愿望_0

2017-05-17 15:56

我就这样写为什么不行呢

写回答关注

7回答

1262485655

2018-06-01 16:45:21

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border实现等高布局</title>
<style type="text/css">
.clearfix:before, .clearfix:after{
display: table;
content: " ";
}
.clearfix:after{
clear: both;
}
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 clearfix">
<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>

0 0
慕粉4108732

2018-01-12 11:23:02

清楚了浮动就可以实现了，不清楚浮动不可以的哦

0 0
喝牛奶对身体好

2017-12-18 21:40:44

精神病院院长的可以，但是要在加一串代码，这样左边有导航右边没有内容的时候也可以等高显示。
.clear{clear:both;}
<div class="clear"></div>//这个代码放在.box的DIV里的最后面

0 0
兼容并包

2017-12-17 22:09:45

希望对你们有帮助。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
<style>
.box{
border-left:300px solid #222;
}
.xa{
width:300px;
float:left;
margin-left:-300px;
}
.module{
line-height:60px;
background:#f00;

}
</style>
</head>
<body>
<div class="box">
<nav class="xa">
<h3>导航1</h3>
</nav>
<section class="module">
<div >模块1</div>
</section>
</div>
</body>
</html>

0 0
慕粉4346413

2017-09-19 11:19:31

我的也不行啊

0 0
慕瓜0564237

2017-06-27 15:27:58

少了一条清楚浮动

0 0
海带妹

2017-05-24 11:49:00

我的也不行，应该少了一些插件

0 0