CSS之聖盃佈局與雙飛翼佈局
聖盃佈局css
三行等高html
HTML：ide
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="docm.css">
</head>
<body>
<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main">1231111<p>我我我</p><p>我我我</p><p>我我我</p><p>我我我</p></div>
<div class="sub">11222</div>
<div class="extra">456</div>
</div>
<div id="ft"></div>
</div>
</body>
</html>佈局
css:（在.bd中設置內邊距，而後在.sub和.extra中設置負邊距把中間的內容顯示出來）ui
*{
margin: 0;
padding: 0;
}
#hd{
width: 100%;
height: 100px;
background-color: #FC3D83;
}
.main {
float: left;
width: 100%; //中間內容自適應
background-color: #ccc;
padding-bottom: 9999px; //把內容撐出去後又收回來造成等高
margin-bottom: -9999px; //把內容撐出去後又收回來造成等高
}
.sub {
float: left;
width: 190px;
margin-left: -100%; //將內容設置到左邊
background-color: #ED1E25;
padding-bottom: 9999px;
margin-bottom: -9999px;
position: relative; //設置相對位置來配放，而雙飛翼不設置
left: -190px; //在.bd中設置內邊距，而後在.sub和.extra中設置負邊距把中間的內容顯示出來
}
.extra {
float: left;
width: 190px;
margin-left: -190px; //將內容設置到右邊
background-color: #f0f;
padding-bottom: 9999px;
margin-bottom: -9999px;
position: relative; //設置相對位置來配放，而雙飛翼不設置
right: -190px; //在.bd中設置內邊距，而後在.sub和.extra中設置負邊距把中間的內容顯示出來
}
#bd {
padding: 0 190px 0 190px; //在.bd中設置內邊距，而後在.sub和.extra中設置負邊距把中間的內容顯示出來
background-color: #ff0;
overflow: hidden; //超出內容隱藏，等高的設置
}
#ft{
width: 100%;
height: 100px;
background-color: #5880F4;
}spa
效果如圖：htm
---------------------------------------------分割線看什麼看-------------------------------------------------------------utf-8
雙飛翼佈局it
上面的聖盃佈局其實已經挺好的，可是由於用了相對定位，因此對於佈局就不太穩定，那麼如何不用相對定位來實現這個效果呢，因而就有了雙飛翼佈局，在mian主要內容中加一個盒子包裹，再用margin-left使內容顯示出來。io
三行等高
HTML:
<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main"><div class="inside">1231111</div></div>
<div class="sub">234<p>我我我<p/><p>我我我<p/><p>我我我<p/><p>我我我<p/></div>
<div class="extra">456</div>
</div>
<div id="ft"></div>
</div>
CSS：
*{
margin: 0;
padding: 0;
}
#hd{
width: 100%;
height: 100px;
background-color: #FC3D83;
}
.main {
float: left;
width: 100%; //自適應
background-color: #ccc;
padding-bottom: 9999px; //把內容撐出去後又收回來造成等高
margin-bottom: -9999px; //把內容撐出去後又收回來造成等高
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
background-color: #ED1E25;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.extra {
float: left;
width: 190px;
margin-left: -190px;
background-color: #f0f;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
#bd {
background-color: #ff0;
overflow: hidden; //超出的內容隱藏
}
.inside{
margin: 0 190px; //中間最裏的盒子設置外邊距把內容顯示出來
}
#ft{
width: 100%;
height: 200px;
background-color: #5880F4;
}
效果如圖：
-
每一个你不满意的现在，都有一个你没有努力的曾经。