未加float代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/c.css" rel="stylesheet">
<title>c01</title>
</head>
<body>
<div class="div1">大</div>
<div class="div2">小</div>
</body>
</html>
css部分
.div1{
background-color:red;
width:20%;
/* float:left; */
}
.div2{
background-color:Green;
width:80%
/* float:left; */
}
加上
float效果
最后再看一个效果
下面是代码：
<div class="f1">
<div class="c1">1</div>
<div class="c1">1</div>
<div class="c1">1</div>
<div class="c1">1</div>
<div class="c1">1</div>
<div class="c1">1</div>
<div class="cle"></div>
</div>
css部分
.f1{
margin-top:10px;
border:1px solid red;
width:300px;
}
.c1{
border:1px solid green;
height:30px;
width:96px;
float:left;
}
.cle{
clear:both;
}
这个可以实现一个外边框红色，内边框绿色的效果。
网友评论