左邊自適應,右邊固定寬度
思路:
1.右邊元素float:right
2.主元素不定寬,設定margin-right為右元素寬度
3.html樹:右元素+主元素
**:
html:
right
main
*
.right
.main
中間自適應 兩邊固定寬
1.聖杯布局
思路:
1.父容器左右內邊距設定為左右元素寬
2.所有子元素設定左浮動,中間元素寬度設定為100%;
3.左元素left設定為-100%,相當於移動到上一行首位.
4.右元素left設定為自身寬度的負數,相當於移動到上一行末尾.
5.利用相對定位,將左右元素移動到內邊距留白位置.
7.html樹:主元素+左元素+右元素
**:
html:
main
left
right
*
.container
.container div
.main
.left
.right
2.雙飛燕布局
思路:和聖杯布局類似,用建立子元素設定margin取代了聖杯布局的相對定位和內邊距方法
1.父容器左右內邊距設定為左右元素寬
2.所有子元素設定左浮動,中間元素寬度設定為100%;
3.左元素left設定為-100%,相當於移動到上一行首位.
4.右元素left設定為自身寬度的負數,相當於移動到上一行末尾.
5.在主元素內建立子元素設定左右外邊距為左右元素寬度.
6.html樹:(主元素》子元素)+左元素+右元素
**:
html:
main
*
.container
.container>div
.main
.left
.right
.content
NEC定寬自適應布局
nec是什麼？nec是nice easy css的簡稱，是網易 杭州 前端css開源專案代號，她為您提供漂亮簡單的樣式解決方案。她包括了規範 框架 庫 外掛程式等內容，致力於為前端開發人員提供高效率高質量的前端頁面開發解決方案，提高多人協作效率，也為非專業人員提供快速製作網頁的解決方案。今天特地學習...
CSS布局樣式 左右布局，左邊定寬，右邊自適應
1.display table width 100 和 diplay table cell tabletitle head wrap sidebar content style id wrap class sidebar sidebardiv class content contentdiv div...
css頁面布局之左側定寬，右側自適應
二列布局的特徵是側欄固定寬度，主欄自適應寬度。三列布局的特徵是兩側兩列固定寬度，中間列自適應寬度。之所以將二列布局和三列布局寫在一起，是因為二列布局可以看做去掉乙個側欄的三列布局，其布局的思想有異曲同工之妙。對於傳統的實現方法，主要討論上圖中前三種布局，經典的帶有側欄的二欄布局以及帶有左右側欄的三欄...