圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style>
*{
margin:0;
padding:0;
text-align:center;/*設置文字居中*/
}
.container{
height:300px;
padding:0 200px;/*使容器整體向中間擠壓*/
}
.middle{
width:100%;
height:300px;
background:gray;
float:left;
}
.left{
width:200px;
height:300px;
background:red;
float:left;
margin-left:-100%;/*使左邊欄浮動到最左邊*/
position:relative;/*設置相對定位，使左邊欄浮動到正確位置*/
left:-200px;
}
.right{
width:200px;
height:300px;
background:green;
float:left;
margin-left:-200px;/*使右邊欄浮動到最右邊*/
position:relative;/*設置相對定位，使右邊欄浮動到正確位置*/
right:-200px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">中間自適應欄</div><!-- 注意此處中間自適應欄要放在文檔流前優先渲染 -->
<div class="left">左邊欄</div>
<div class="right">右邊欄</div>
</div>
</body>
</html>
雙飛翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雙飛翼布局</title>
<style>
*{
margin:0;
padding:0;
text-align:center;
}
.middle{
width:100%;
float:left;
}
.middle-inner{
height:300px;
background:gray;
margin-left:200px;
margin-right:200px;
}
.left{
width:200px;
height:300px;
background:red;
float:left;
margin-left:-100%;
}
.right{
width:200px;
height:300px;
background:green;
float:left;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-inner">中間自適應欄</div>
</div>
<div class="left">左邊欄</div>
<div class="right">右邊欄</div>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
