前端学习真是要多动手，虽然不难，却没有编程语言一样有逻辑，靠理解的地方不多，反倒是需要多动手，才会慢慢熟练。
1.效果
2.遇到的问题及解决办法
不同的div间，其中存在浮动元素，但仍然会相互影响，下图两个div各包含3个浮动元素，由于第一个过高，导致影响下一行，如下：
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.left{
float: left;
}
.clear{
clear: both;
}
.d1{
background-color:darkred;
width: 100%;
height: 200px;
/*overflow:hidden; 解决办法1 */
/*margin-bottom: 100px;解决办法2 （数值随便调）*/
}
.d2{
background-color: tomato;
width: 100%;
height: 300px;
}
.d1 .b1{
width: 50px;
height: 300px;
background-color: yellow;
}
.d1 .b2{
width: 50px;
height: 150px;
background-color: cyan;
}
.d1 .b3{
background-color:darkred;
width: 50px;
height: 50px;
background-color: pink;
}
.d2 .a1{
width: 50px;
height: 100px;
background-color: orange;
}
.d2 .a2{
width: 50px;
height: 150px;
background-color: green;
}
.d2 .a3{
background-color:darkred;
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="d1">
<div class="b1 left"></div>
<div class="b2 left"></div>
<div class="b3 left"></div>
</div>
<!--<div class="clear"></div> 解决办法3-->
<div class="d2">
<div class="a1 left"></div>
<div class="a2 left"></div>
<div class="a3 left"></div>
</div>
</body>
</html>
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
