兩邊固定中間自適應佈局

1.flex佈局
    思路:將父元素box設爲display:flex;可將box設置爲彈性盒模型進行佈局(若是對flex不瞭解,可點擊打開連接學習)css

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width:100%;
height:100px;
display:flex;
margin:10px;
}
#left,#right{
width:200px;
height:100px;
margin:10px;
background-color:#999;
}
#center{
flex:1;
height:100px;
margin:10px;/*左右margin不會疊加*/
background-color:#f00;
}
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>html

2.利用浮動(float)
   讓左右元素浮動,缺點是中間元素必須置於兩者以後,否則right元素會進入下一行瀏覽器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.left,.right{
width:200px;
height:200px;
background-color:#999;
}
.left{
float:left;
}
.right{
float:right;
}
.center{
margin:0 200px;
height:300px;
background-color:#f00;
}
</style>
</head>
<body>
<!--該佈局法的好處是受外界影響小,可是不足是 三個元素的順序,center必定要放在最後,這是
和絕對定位不同的地方,center佔據文檔流位置,因此必定要放在最後,左右兩個元素位置沒有關係。
當瀏覽器窗口很小的時候,右邊元素會被擊倒下一行。-->
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>

</body>
</html> dom

3.利用絕對定位(position)
center居中並利用margin爲左右兩邊留出位置,左右絕對定位ide

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css三列布局</title>
<style type="text/css">
/*左右固定,中間自適應 利用絕對定位*/
.container{
width: 100%;
height: 100%;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: black;
color:#fff;
}
.center{
/*width: auto;*/ /*若是沒有這一句,那麼,center這個div的文字就不會自動換行*/
margin: 0 400px;
height: 400px;
background-color: yellow;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>

佈局

4.聖盃佈局和雙飛翼佈局學習

聖盃佈局和雙飛翼佈局基本上是一致的,都是兩邊固定寬度,中間自適應的三欄佈局,其中,中間欄放到文檔流前面,保證先行渲染。解決方案大致相同,都是三欄所有float:left浮動,區別在於解決中間欄div的內容不被遮擋上,聖盃佈局是中間欄在添加相對定位,並配合left和right屬性,效果上表現爲三欄是單獨分開的(若是能夠看到空隙的話),而雙飛翼佈局是在中間欄的div中嵌套一個div,內容寫在嵌套的div裏,而後對嵌套的div設置margin-left和margin-right,效果上表現爲左右兩欄在中間欄的上面,中間欄仍是100%寬度,只不過中間欄的內容經過margin的值顯示在中間。flex

    效果簡圖以下:spa

    

一、聖盃佈局code

    注意middle寫在前面就好了,dom結構以下:

複製代碼
DOM:
<body>
<div id="hd">header</div>
<div id="bd">
<div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> </div>
<div id="footer">footer</div> </body>
複製代碼

相對應的CSS內容以下:

複製代碼
<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右欄經過添加負的margin放到正確的位置了,此段代碼是爲了擺正中間欄的位置*/
padding:0 200px 0 180px; height:100px; } #middle{ float:left; width:100%;/*左欄上去到第一行*/
height:100px; background:blue; } #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9; /*中間欄的位置擺正以後,左欄的位置也相應右移,經過相對定位的left恢復到正確位置*/
position:relative; left:-180px; } #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0c9;     /*中間欄的位置擺正以後,右欄的位置也相應左移,經過相對定位的right恢復到正確位置*/
position:relative; right:-200px; } #footer{
height:50px;
    background: #666;
    text-align: center;
}
</style>
複製代碼

二、雙飛翼佈局

    DOM代碼以下:

複製代碼
<body>
<div id="hd">header</div> 
<div id="middle">
<div id="inside">middle</div>
</div> <div id="left">left</div> <div id="right">right</div> <div id="footer">footer</div> </body>
複製代碼

    雙飛翼佈局是在middle的div裏又插入一個div,經過調整內部div的margin值,實現中間欄自適應,內容寫到內部div中。

    CSS代碼以下:

複製代碼
<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左欄上去到第一行*/         height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}
/*給內部div添加margin,把內容放到中間欄,其實整個背景仍是100%*/ #inside{    margin:0 200px 0 180px;    height:100px;}#footer{     clear:both; /*記得清楚浮動*/     height:50px;        background: #666;       text-align: center; } </style>
相關文章
相關標籤/搜索