<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>田字格布局</title>
<style>
#prat1{
width: 200px
height: 200px
background: blue
float: left
}
#prat2{
width: 200px
height: 200px
background: red
float: left
}
#prat3{
width: 200px
height: 200px
background: yellow
float: left
clear: left
}
#prat4{
width: 200px
height: 200px
background: green
float: left
}
</style>
</head>
<body>
<div id="prat1">1块</div>
<div id="prat2">2块</div>
<div id="prat3">3块</div>
<div id="prat4">4块</div>
</body>
</html>
这个比较简单，可以拆分一下，先上下布局，在子区域里左右布局。<div>
<div style="float:leftwidth:49%">上左</div>
<div style="float:rightwidth:49%">上右</div>
</div>
<div>
<div style="float:leftwidth:49%">下左</div>
<div style="float:rightwidth:49%">下右</div>
</div>
具体css自行设置
当然，先左右布局，在子区域里上下布局也行
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）