负边距布局
.container {
overflow: hidden;
}
.wrap {
width: 100%; float: left;
}
.body {
background: red;
margin-left: 120px;
margin-right: 150px;
}
.left {
background: green;
margin-left:-100%;
float:left;
width: 120px;
}
.right {
background: yellow;
margin-left: -150px;
float: left;
width: 150px;
}
.container1 {
border: solid 1px red;
width: 200px;
height: 200px;
position:relative;
}
.block {
width: 100px;
height: 100px;
float: left;
background: yellow;
margin-left: -50px;
margin-top: -50px;
position: absolute;
top:50%;
left:50%;
}
.container2 {
overflow: hidden;
}
.item {
float: left;
width: 50px;
background: lime;
margin-right: 10px;
padding-bottom: 100px;
margin-bottom: -100px;
}
<!DOCTYPE html>
<html>
<head>
<title>负边距布局</title>
<meta charset="utf-8">
<style type="text/css">
.container {
overflow: hidden;
}
.wrap {
width: 100%; float: left;
}
.body {
background: red;
margin-left: 120px;
margin-right: 150px;
}
.left {
background: green;
margin-left:-100%;
float:left;
width: 120px;
}
.right {
background: yellow;
margin-left: -150px;
float: left;
width: 150px;
}
</style>
<style type="text/css">
.container1 {
border: solid 1px red;
width: 200px;
height: 200px;
position:relative;
}
.block {
width: 100px;
height: 100px;
float: left;
background: yellow;
margin-left: -50px;
margin-top: -50px;
position: absolute;
top:50%;
left:50%;
}
.container2 {
overflow: hidden;
}
.item {
float: left;
width: 50px;
background: lime;
margin-right: 10px;
padding-bottom: 100px;
margin-bottom: -100px;
}
</style>
</head>
<body>
<hr>
<p>三列布局：</p>
<p> </p>
<div class="container">
<div class="wrap">
<div class="body">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<hr color="red" />
<div>
<p>绝对定位元素</p>
<div class="container1">
<div class="block"></div>
</div>
<p> </p>
<hr/>
<div class="container2">
<p>等高布局</p>
<div class="item">123</div>
<div class="item">234<br/>345<br/>456<br/></div>
<div class="item">467</div>
</div>
</body>
</html>
三列布局：
center
left
right
绝对定位元素
等高布局
123
234
345
456
467