css之品字布局

1、品字布局（每块都有固定宽高）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>品字布局</title>
<style>
*{margin:0; padding:0;}
div{ width:100px; height:100px; background:red; font-size:40px; line-height:100px; color:#fff; text-align:center;}
.div1{ margin:50px auto 0;}
.div2{ background:green; float:left; margin-left:50%; position:relative; left:-100px;}
.div3{ background:blue; float:left; position:relative; left:-100px;}
</style>
</head>

<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>

显示结果：

2、实现全屏的品字布局（自适应的）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>品字布局</title>
<style>
*{margin:0; padding:0;}
div{ width:100%; height:100px; background:red; font-size:40px; line-height:100px; color:#fff; text-align:center;}
.div1{ margin:0 auto 0;}
.div2{ background:green; float:left; width:50%;}
.div3{ background:blue; float:left; width:50%;}
</style>
</head>

<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>

显示效果：