目的
中間欄div內容不被遮擋
圣杯布局
為了中間div內容不被遮擋，將中間div設置了左右padding-left和padding-right后，將左右兩個div用相對布局position: relative并分別配合right和left屬性，以便左右兩欄div移動后不遮擋中間div。
html代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="middle">
中
</div>
<div class="left">
左
</div>
<div class="right">右</div>
</div>
</body>
</html>
css代碼
*{
margin:0;
padding:0;
}
div{
height:150px;
}
.left{
background: orange;
float:left;
width: 300px;
<!--讓左模塊跑到左邊來-->
margin-left:-100%;
}
.right{
float:left;
background: blue;
width: 200px;
<!--讓右模塊跑到右邊來-->
margin-left:-200px;
}
.middle{
background: yellow;
float:left;
width: 100%;
}
.middle .inner{
/*margin-left:300px;*/
}
.container{
padding-left:300px;
padding-right:200px;
}
開始效果
alt 開始效果
優化css實現圣杯布局
*{
margin:0;
padding:0;
}
div{
height:150px;
}
.left{
background: orange;
float:left;
width: 300px;
margin-left:-100%;
<!--relative,相對自己 left:-300px,向左移動300px-->
position:relative;
left:-300px;
}
.right{
float:left;
background: blue;
width: 200px;
margin-left:-200px;
<!--relative,相對自己,left:200px,是與左邊多出200px-->
position:relative;
left:200px;
}
.middle{
background: yellow;
float:left;
width: 100%;
}
.middle .inner{
/*margin-left:300px;*/
}
.container{
padding-left:300px;
padding-right:200px;
}
中間效果
[圖片上傳失敗...(image-9035fd-1580932123057)]
*{
margin:0;
padding:0;
}
div{
/*height:300px;*/
}
.left{
float:left;
width: 300px;
background:orange;
margin-left:-100%;
position: relative;
left:-300px;
}
.right{
float:right;
background:red;
width: 200px;
margin-left:-200px;
position: relative;
left:200px;
}
.middle{
float: left;
width: 100%;
background: blue;
}
.left,.right,.middle{
padding-bottom:9999px;
margin-bottom: -9999px;
}
.container{
padding-left:300px;
padding-right:200px;
overflow: hidden;
}
最終效果
[圖片上傳失敗...(image-bd1c9a-1580932123057)]
雙飛翼布局
為了中間div內容不被遮擋，直接在中間div內部創建子div用于放置內容，在該子div里用margin-left和margin-right為左右兩欄div留出位置。
html
<div class="container">
<div class="middle">
<div class="inner">
中
</div>
</div>
<div class="left">
左
<div>
第二行
</div>
</div>
<div class="right">右</div>
</div>
css
*{
margin:0;
padding:0;
}
div{
/*height:300px;*/
}
.left{
float:left;
width: 300px;
background:orange;
margin-left:-100%;
}
.right{
float:right;
background:blue;
width: 200px;
margin-left:-200px;
}
.middle{
float: left;
width: 100%;
background: yellow;
}
.middle .inner{
margin-left:300px;
}
.left,.right,.middle{
padding-bottom:9999px;
margin-bottom: -9999px;
}
.container{
/*padding-left:300px;
padding-right:200px;
overflow: hidden;*/
overflow: hidden;
}
雙飛翼效果
[圖片上傳失敗...(image-186570-1580932123057)]
