共计 1755 个字符，预计需要花费 5 分钟才能阅读完成。
float + margin + calc
<style>
.parent{
overflow: hidden;
}
.left, .right{
float: left;
width: 100px;
}
.center{
float: left;
width:calc(100% – 240px);
margin: 0 20px;
}
</style>
<html>
<div class=”parent” style=”background-color: lightgrey;”>
<div class=”left” style=”background-color: lightblue;”>
<p>left</p>
</div>
<div class=”center” style=”background-color: pink;”>
<p>center</p>
<p>center</p>
</div>
<div class=”right” style=”background-color: lightgreen;”>
<p>right</p>
</div>
</div>
</html>
table
<style>
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.right,.centerWrap{
display:table-cell;
}
.left,.right{
width: 100px;
}
.center{
margin: 0 20px;
}
</style>
<html>
<div class=”parent” style=”background-color: lightgrey;”>
<div class=”left” style=”background-color: lightblue;”>
<p>left</p>
</div>
<div class=”centerWrap” style=”background-color: orange;”>
<div class=”center” style=”background-color: pink;”>
<p>center</p>
<p>center</p>
</div>
</div>
<div class=”right” style=”background-color: lightgreen;”>
<p>right</p>
</div>
</div>
</html>
圣杯布局
<style>
.wrap{
padding-left: 200px;
padding-right: 150px;
}
.main{
position: relative;
width: 100%;
float: left;
background: deeppink;
}
.aside{
position: relative;
width: 200px;
float: left;
margin-left: -100%;
background: pink;
right: 200px;
}
.ad{
position: relative;
width: 150px;
float: left;
margin-right: -150px;
background: pink;
}
</style>
<html>
<div class=”wrap”>
<div class=”main”> main </div>
<div class=”aside”> aside </div>
<div class=”ad”> ad </div>
</div>
</html>
双飞翼布局
<style>
.main{
width: 100%;
float: left;
}
.main > .inner{
margin-left: 200px;
margin-right: 150px;
background: deeppink;
}
.aside{
width: 200px;
float: left;
margin-left: -100%;
background: pink;
}
.ad{
width: 150px;
float: left;
margin-left: -150px;
background: pink;
}
</style>
<html>
<div class=”main”>
<div class=”inner”> main </div>
</div>
<div class=”aside”> aside </div>
<div class=”ad”> ad </div>
</html>
