如何利用div+float写出一个田字的布局
来源：13-4 起飞咯 - 浮动模型
傅Dimon
2016-03-21 09:58
求解，求解
写回答
关注
2回答
-
- _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则浮动形成左右排列。
-
- 天生不适合搞技术
- 2016-03-21 10:07:19
给最外层的div一个宽度，高度可给可不给，然后在这个div中给四个div，分别float:left，两个div的宽度加起来等于最外层div的宽度就可以了，因为浮动型，当宽度不够的时候，会自动往下排列，不知道你懂了没？
初识HTML(5)+CSS(3)-升级版
HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义
1225293 学习 · 18230 问题
相似问题