<style>
.clearfix::after{
content: "";
display: table;
clear: both;
}
.wrap{
width: 700px;
margin: 0 auto;
border: 1px solid red;
}
.top, .foot{
height: 50px;
border: 1px solid red;
background-color: blue;
}
.main{
padding: 0 100px;
overflow: hidden;
}
.main .left,
.main .content,
.main .right{
float: left;
position: relative;
background-color: gold;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.main .left{
left: -100px;
width: 100px;
}
.main .content{
width: 100%;
margin-left: -100px;
background-color: red;
}
.main .right{
left: 100px;
width: 100px;
margin-left: -100px;
}
</style>
</head>
<div class="wrap">
<div class="top"></div>
<div class="main">
<div class="left">1</div>
<div class="content clearfix">2</div>
<div class="right">3</div>
</div>
<div class="foot"></div>
</div>
|
