css經典佈局系列二——等分等高佈局
摘要：
要求兩列，左邊一列固定寬度，右邊一列根據瀏覽器自適應；
<div class="parent">
<div class="left">
<p>left</p>
</div&g...
- 要求兩列，左邊一列固定寬度，右邊一列根據瀏覽器自適應；
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> 複製程式碼
float + margin
- 左邊浮動，右邊設定margin-left等於左邊元素寬度
<style>
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*間距可再加入 margin-left */
}
</style>
複製程式碼
-
IE 6 中會有3畫素的 BUG，解決方法可以在 .left 加入 margin-left:-3px
- 解決這個小bug的方案如下：
<style> .left { float: left; width: 100px; } .right-fix { float: right; width: 100%; margin-left: -100px; } .right { margin-left: 100px /*間距可再加入 margin-left */ } </style> 複製程式碼- 此方法不會存在 IE 6 中3畫素的 BUG，但 .left 不可選擇， 需要設定 .left {position: relative} 來提高層級。
- 注意此方法增加了不必要的 HTML 文字結構。
- 傲嬌的程式設計師應該放棄太低版本的瀏覽器
float + overflow
- 相當於right也開啟了bfc，就不會被left的浮動影響到。
<style>
.left {
float: left;
width: 100px;
}
.right {
overflow: hidden;
}
</style>
複製程式碼
- 設定 overflow: hidden 會觸發 BFC 模式（Block Formatting Context）塊級格式上下文。BFC是什麼呢。用通俗的來講就是，隨便你在BFC 裡面幹啥，外面都不會受到影響 。
- 此方法樣式簡單但不支援 IE 6
table
- table 的顯示特性為每列的單元格寬度和一定等於表格寬度。
- table-layout: fixed 可加速渲染，也是設定佈局優先。
- table-cell 中不可以設定 margin 但是可以通過 padding 來設定間距
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell;
/*寬度為剩餘寬度*/
}
</style>
複製程式碼
flex
- 低版本瀏覽器相容問題效能問題，只適合小範圍佈局
<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>
複製程式碼
我們在學會一列定寬，一列自適應的佈局後也可以方便的實現 多列定寬，一列自適應 多列不定寬加一列自適應。
等分佈局
- 多列布局，每列根據瀏覽器寬度等比分配各自寬度；
<div class="parent"> <div class="column"> <p>1</p> </div> <div class="column"> <p>2</p> </div> <div class="column"> <p>3</p> </div> <div class="column"> <p>4</p> </div> </div> 複製程式碼
float+百分比
- 此方法可以完美相容 IE8 以上版本
<style>
.parent {
margin-left: -20px;
}
.column {
float: left;
width: 25%;
padding-left: 20px;
// 將內邊距和border放到元素的內容寬高裡面
box-sizing: border-box;
}
</style>
複製程式碼
flex
- 強大簡單，有相容問題
<style>
.parent {
display: flex;
}
.column {
flex: 1;
}
.column+.column { /* 相鄰兄弟選擇器 */
margin-left: 20px;
}
</style>
複製程式碼
table
<style>
.parent-fix {
margin-left: -20px;
}
.parent {
display: table;
width: 100%;
/*可以佈局優先，也可以單元格寬度平分在沒有設定的情況下*/
table-layout: fixed;
}
.column {
display: table-cell;
padding-left: 20px;
}
</style>
複製程式碼
等高佈局
- 兩列為例子，左邊和右邊的列高度相等；
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> 複製程式碼
table
- table 的特性為每列等寬，每行等高可以用於解決此需求
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell
/*寬度為剩餘寬度*/
}
</style>
複製程式碼
flex
- 設定flex佈局之後，在側軸上的排列方式預設為stretch，也就是未設定高度時，預設佔滿了整個容器的高；
<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>
//注意這裡實際上使用了 align-items: stretch，flex 預設的 align-items 的值為 stretch
複製程式碼
float
- 此方法為偽等高（只有背景顯示高度相等），左右真實的高度其實不相等，可用控制檯檢視。
- 相容性較好。
<style>
.parent {
overflow: hidden;
}
.left,.right {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</style>
複製程式碼
多列的等高佈局
- 要求：
- 多列中內容不確定高度，但是要求多列無論內容所佔高度，每列都要是等高的；
- 每一列的div 標籤中的內容所佔高度不同，而且沒有明確的給 div 一個高度，而且也不知道這個內容會佔多高；
- 直接為所有 div 硬性的設定一個高度，是不行的，不靈活，不便後期維護；
.container {
overflow: hidden;
}
div.item {
// 相當於把每列的高度再加10000px
padding-bottom: 10000px;
// 又把每列div在文件流中所加的10000px減少了，這樣後面緊跟元素就會緊跟著上來。
margin-bottom: -10000px;
}
複製程式碼
到此，我們瞭解常見的佈局解決方案，這些只是參考，一樣的佈局實現方式多種多樣。 主要就使用position、flex 、table（從很久很久以前起，我們就拋棄了table佈局頁面，但display: table;是異常強大）、float等屬性目前flex相容性較差 傲嬌的程式設計師應該放棄太低版本的瀏覽器。