<!DOCTYPE html>
<html>
<head>
<title>兩列定寬中間自適應(yīng)布局</title>
<meta charset="utf-8">
</head>
<body>
<h1>1沦寂、流體布局</h1>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<style type="text/css">
.left{
width: 200px;
height: 100px;
background-color: red;
float: left;
}
.right{
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.center{
height: 100px;
background-color: yellow;
margin-left: 200px;
margin-right: 100px;
}
</style>
<h1>2、BFC三欄布局</h1>
<p>BFC規(guī)則固额,BFC區(qū)域不會與浮動元素重疊凡橱,利用這一點(diǎn)進(jìn)行三列布局</p>
<p>
觸發(fā)條件:
1州叠、body 根元素
2、浮動元素:float 除 none 以外的值
3、絕對定位元素:position (absolute宫莱、fixed)
4份招、display 為 inline-block切揭、table-cells、flex
5锁摔、overflow 除了 visible 以外的值 (hidden廓旬、auto、scroll)
</p>
<div class="BFCleft"></div>
<div class="BFCright"></div>
<div class="BFCcenter"></div>
<style type="text/css">
.BFCleft{
width: 300px;
height: 200px;
background-color: blue;
float: left;
margin-right: 10px;
}
.BFCright{
width: 300px;
height: 200px;
float: right;
background-color: yellow;
margin-left: 10px;
}
.BFCcenter{
height: 200px;
background-color: green;
overflow: hidden;
}
</style>
<h1>3谐腰、雙飛翼布局SFY</h1>
<p>利用的是浮動元素 margin 負(fù)值的應(yīng)用</p>
<div class="container">
<div class="SFYcenter"></div>
</div>
<div class="SFYleft"></div>
<div class="SFYright"></div>
<style type="text/css">
.container{
width: 100%;
float: left;
}
.SFYcenter{
height: 100px;
background-color: red;
margin-left: 210px;
margin-right: 110px;
}
.SFYleft{
float: left;
width: 200px;
height: 100px;
background-color: green;
margin-left: -100%;
}
.SFYright{
float: right;
width: 100px;
height: 100px;
background-color: blue;
margin-left: -200px;
}
</style>
<h1>4孕豹、圣杯布局SB</h1>
<p>圣杯布局有包裹div且全部左浮動</p>
<div class="wrap">
<div class="SBcenter"></div>
<div class="SBleft"></div>
<div class="SBright"></div>
</div>
<style type="text/css">
.wrap{
margin-left: 120px;
margin-right: 220px;
}
.SBcenter{
float: left;
height: 100px;
background-color: blue;
width: 100%;/*才會展示出來*/
}
.SBleft{
float: left;
width: 100px;
height: 100px;
background-color: yellow;
margin-left: -100%;
position: relative;
left: -120px;
}
.SBright{
float: left;
width: 200px;
height: 100px;
background-color: red;
margin-left: -200px;
position: relative;
right: -220px;
}
</style>
<div style="clear: both;"></div>
<h1>5涩盾、Flex布局</h1>
<div class="FlexWrap">
<div class="Flexcenter"></div>
<div class="Flexleft"></div>
<div class="Flexright"></div>
</div>
<style type="text/css">
.FlexWrap{
display: flex;
}
.Flexcenter{
flex-grow: 1;
height: 100px;
background-color: blue;
}
.Flexleft{
order: -1;
flex: 0 1 200px;
background-color: red;
height: 100px;
margin-right: 10px;
}
.Flexright{
flex: 0 1 100px;
background-color: green;
height: 100px;
margin-left: 10px;
}
</style>
<h1>6、絕對定位布局position: absolute</h1>
<div class="PAWrap">
<div class="PAcenter"></div>
<div class="PAleft"></div>
<div class="PAright"></div>
</div>
<style type="text/css">
.PAWrap{
position: relative;
}
.PAcenter{
height: 200px;
margin: 0 160px 0 210px;
background-color: red;
}
.PAleft{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 0;
top: 0;
}
.PAright{
width: 150px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
right: 0;
}
</style>
<h3>7励背、table布局</h3>
<div id="tablewrap">
<div id="left_table"></div>
<div id="tablexmain"></div>
<div id="right_table"></div>
</div>
<style type="text/css">
#tablewrap{
display: table;
width:100%;
}
#tablemain,#left_table,#right_table{
display: table-cell;
}
#tablexmain{
background-color: blue;
height: 300px;
}
#left_table{
height: 300px;
width: 200px;
background-color: red;
}
#right_table{
height: 300px;
width: 100px;
background-color: green;
}
/*缺點(diǎn)無法設(shè)置欄間距*/
</style>
</body>
</html>
7中兩列定寬中間自適應(yīng)三列布局
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門妖爷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人理朋,你說我怎么就攤上這事絮识。” “怎么了嗽上?”我有些...
- 文/不壞的土叔 我叫張陵次舌,是天一觀的道長。 經(jīng)常有香客問我兽愤,道長彼念,這世上最難降的妖魔是什么? 我笑而不...
- 正文 為了忘掉前任浅萧,我火速辦了婚禮逐沙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘洼畅。我一直安慰自己吩案,他們只是感情好,可當(dāng)我...
- 文/花漫 我一把揭開白布帝簇。 她就那樣靜靜地躺著徘郭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪丧肴。 梳的紋絲不亂的頭發(fā)上残揉,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼陶夜!你這毒婦竟也來了凛驮?” 一聲冷哼從身側(cè)響起,我...
- 序言:老撾萬榮一對情侶失蹤条辟,失蹤者是張志新(化名)和其女友劉穎黔夭,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體羽嫡,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡本姥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了杭棵。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片婚惫。...
- 正文 年R本政府宣布蒋川,位于F島的核電站,受9級特大地震影響撩笆,放射性物質(zhì)發(fā)生泄漏捺球。R本人自食惡果不足惜,卻給世界環(huán)境...
- 文/蒙蒙 一夕冲、第九天 我趴在偏房一處隱蔽的房頂上張望懒构。 院中可真熱鬧,春花似錦耘擂、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至篙悯,卻和暖如春蚁阳,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鸽照。 一陣腳步聲響...
- 正文 我出身青樓定血,卻偏偏與公主長得像赔癌,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子澜沟,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 和上面的解決方案是一樣的正什,自己動腦筋哦下面的overflow的方式display:table和flex大家自己練習(xí)。
- 大家好,今天是2016年里的最后一天馒索。 此刻的你是否會對即將逝去的一年感到不舍莹妒?或者深嘆口氣覺得終于熬過了這一年?...
- 01 上大學(xué)時(shí),認(rèn)識一個(gè)“有趣”的女生方仿。她幾乎每周都有飯局固棚,和校外同學(xué)一起玩滑板统翩,參加戶外音樂節(jié),追星此洲,和酷炫的男...