如何利用div+float写出一个田字的布局

源自：13-4 起飞咯 - 浮动模型

如何利用div+float写出一个田字的布局

求解，求解

提问者：傅Dimon 2016-03-21 09:58

个回答

_Jack_Han_

2016-04-04 22:09:58

已采纳
<!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>
```
思路：两个父级div中的两个子级div没有设置float所以垂直排列。给两个父级div设置float属性后，两列垂直排列的子级div则浮动形成左右排列。
```
1
天生不适合搞技术

2016-03-21 10:07:19

给最外层的div一个宽度，高度可给可不给，然后在这个div中给四个div，分别float:left，两个div的宽度加起来等于最外层div的宽度就可以了，因为浮动型，当宽度不够的时候，会自动往下排列，不知道你懂了没？

0