div 水平排列
以下面這組 div 為例，wrap 的高度由內容撐開
<div id="wrap"><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div> </div>- 1
- 2
- 3
- 4
- 5
平時是這樣的，上下排列~
float 浮動
#div1{float: left; } #div2 {float: right; } #div3 {float: right; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
然后這樣了
成功橫向排列了，但是有幾個問題~
float 的特點：
-
多個 div 右浮動時，順序會顛倒，請注意看 div2 和 div3，可以通過將它們再用一個 div 包起來，然后對它們設置左浮動，對父 div 設置右浮動來解決。
-
脫離文檔流，若父元素高度由內容撐開，那么就撐不開，從圖中可以看到 wrap 沒了，因為高度變為了 0，可通過清浮動來解決。
-
文字會環繞在浮動元素周圍，圖中未表現出來。
- 不能換行，圖中未表現出來。
inline-block 行塊標簽
#div1, #div2, #div3{display: inline-block; }- 1
- 2
- 3
橫排成功~但同樣有些問題：
inline-block 特點：
-
元素間會有空白。這個空白其實是空白符，因為 inline-block 會使元素在行內排列，也就是跟文字在一起排列，而我們源代碼中 div 和 div 之間的空格、Tab、換行符在瀏覽器里會被合并成一個空白符，所以就會出現縫隙，常見的解決方案有：
- 通過給父元素設置?font-size: 0;?，使空白符不可見。但會導致子元素中繼承的字體大小也為 0，解決方案：?
- 可以明確子元素內字體大小的，為其單獨設置文字大小。
- 可以使用 rem 作為字體大小單位來繼承 HTML 根元素的字體大小屬性。
-
在源代碼里把前一個 div 的結束標簽和后一個 div 的開始標簽貼在一起。可讀性極差，丑拒。
<div id="wrap"><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div> </div>- 1
- 2
- 3
- 4
- 5
- 不用 inline-block，嘿嘿~
- 可以換行，如下圖
flex 彈性盒模型
最愛的解決方案，給父元素設置?display: flex;?即可。
#wrap{display: flex; }- 1
- 2
- 3
效果圖：
還可以通過?justify-content?屬性調整子元素的水平對齊方式：
#wrap{display: flex;justify-content: flex-start; }- 1
- 2
- 3
- 4
flex-start：
默認，圖同上。
flex-end：
center：
space-around：
space-between：
不過當父元素寬度不夠時， flex 默認是不會換行的，而是會等比例壓縮，縮放比例?flex-shrink?屬性或復合屬性?flex?相關。
通過?flex-wrap?屬性可以使其換行，該值有三個取值?nowrap、?wrap、?wrap-reverse，默認為?nowrap。
#wrap{display: flex;flex-wrap: nowrap; }- 1
- 2
- 3
- 4
nowrap
默認，圖略。
wrap
wrap-reverse
flex 使用不再深入探討，推薦阮一峰寫的教程?Flex 布局教程：語法篇
原文地址：http://blog.csdn.net/zmhawk/article/details/73293366
原文地址：
總結
