weibo_e_狼传说_0
2016-11-16 22:11
11-8这一张的代码.因为取消掉它就没有了自带的green背景了
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>columns</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
.wrapper{
width: 100%;
background: green;
max-width: 980px;
/*overflow: hidden;*/
margin-left: auto;
margin-right: auto;
border:5px solid red;
}
.left {
float: left;
width: 20%;
background: orange;
min-height: 100px;
}
.content {
float: right;
width: 78%;
background: blue;
min-height: 100px;
}
@media (max-width: 480px) {
.wrapper {
min-width: 320px;
width: 98%;
margin-left: 1%;
margin-right: 1%;
}
.left {
float: none;
width: 100%;
}
.content{
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="content"></div>
</div>
</body>
</html>
没有overflow的时候wrapper因为里面的元素浮动没有消除,不会占据高度,overflow不仅可以隐藏溢出,还可以消除浮动。
十天精通CSS3
242556 学习 · 2623 问题
相似问题