品字布局设计
基本思路1：三块高宽是确定的；上面那块用margin: 0 auto;居中；下面两块用float或者inline-block不换行；用margin调整位置使他们居中。
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; border: 0; } .d1, .d2, .d3{ height: 100px; width: 100px; background-color: #FF0000;
border: solid 1px #000000;
} .d1{
margin: 0 auto;
} .d3{
float: left;
margin-left: -200px;
} .d2{
float: left;
margin-left: 50%; }</style></head><body> <div class="d1">上</div> <div class="d2">右</div>
<div class="d3">左</div>
</body>
</html>基本思路2：上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline或者inline-block使其不换行即可。
（1）
<!doctype>
<html>
<head>
<title>test</title>
</head>
<style>
*{
margin:0;
padding: 0;
}
.main .left{
float:left;
height:50%;
width:50%;
}
.main .right{
height:50%;
}
.clear{
clear:both;
}
.header{
height:50%;
width:100%;
}
</style>
<body>
<div class="header">1</div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
</html>
（2）
<!doctype>
<html>
<head>
<title>test</title>
</head>
<style>
*{
margin:0;
padding: 0;
}
.left{
float:left;
height:50%;
width:50%;
}
.right{
height:50%;
}
.header{
height:50%;
width:100%;
}
</style>
<body>
<div class="header">1</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
浙公网安备 33010602011771号