如何利用div+float写出一个田字的布局
求解，求解
傅Dimon
2016-03-21
2 回答
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>用float进行田字型排版</title>
<style type="text/css">
.father div{border:5px solid red; margin:0px; width:100px; height:100px;}
.father{float:left;}
</style>
</head>
<body>
<div class="father">
<div></div>
<div></div>
</div>
<div class="father">
<div></div>
<div></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>用float进行田字型排版</title>
<style type="text/css">
.father div{border:5px solid red; margin:0px; width:100px; height:100px;}
.father{float:left;}
</style>
</head>
<body>
<div class="father">
<div></div>
<div></div>
</div>
<div class="father">
<div></div>
<div></div>
</div>
</body>
</html>
思路：两个父级div中的两个子级div没有设置float所以垂直排列。给两个父级div设置float属性后，两列垂直排列的子级div则浮动形成左右排列。
举报
0/150
提交
取消
