html5:div 橫向排列的方法

div 橫向排列的方法。

以下面這組 div 為例，wrap 的高度由內容撐開

1.  
   <div id="wrap">
2.  
   <div id="div1">div1</div>
3.  
   <div id="div2">div2</div>
4.  
   <div id="div3">div3</div>
5.  
   </div>

平時是這樣的，上下排列~

float 浮動

1.  
   #div1{
2.  
   float: left;
3.  
   }
4.  
   #div2 {
5.  
   float: right;
6.  
   }
7.  
   #div3 {
8.  
   float: right;
9.  
   }

 

然后這樣了

成功橫向排列了，但是有幾個問題~

float 的特點：

• 多個 div 右浮動時，順序會顛倒，請注意看 div2 和 div3，可以通過將它們再用一個 div 包起來，然后對它們設置左浮動，對父 div 設置右浮動來解決。

• 脫離文檔流，若父元素高度由內容撐開，那么就撐不開，從圖中可以看到 wrap 沒了，因為高度變為了 0，可通過清浮動來解決。

• 文字會環繞在浮動元素周圍，圖中未表現出來。

• 不能換行，圖中未表現出來。

inline-block 行塊標簽

1.  
   #div1, #div2, #div3{
2.  
   display: inline-block;
3.  
   }

橫排成功~但同樣有些問題：

inline-block 特點：

• 元素間會有空白。這個空白其實是空白符，因為 inline-block 會使元素在行內排列，也就是跟文字在一起排列，而我們源代碼中 div 和 div 之間的空格、Tab、換行符在瀏覽器里會被合並成一個空白符，所以就會出現縫隙，常見的解決方案有：

  1. 通過給父元素設置 font-size: 0; ，使空白符不可見。但會導致子元素中繼承的字體大小也為 0，解決方案： 
     1. 可以明確子元素內字體大小的，為其單獨設置文字大小。
     2. 可以使用 rem 作為字體大小單位來繼承 HTML 根元素的字體大小屬性。

  2. 在源代碼里把前一個 div 的結束標簽和后一個 div 的開始標簽貼在一起。可讀性極差，丑拒。

     1.  
        <div id="wrap">
     2.  
        <div id="div1">div1
     3.  
        </div><div id="div2">div2
     4.  
        </div><div id="div3">div3</div>
     5.  
        </div>
  3. 不用 inline-block，嘿嘿~
• 可以換行，如下圖

flex 彈性盒模型

最愛的解決方案，給父元素設置 display: flex; 即可。

1.  
   #wrap{
2.  
   display: flex;
3.  
   }

效果圖：

還可以通過 justify-content 屬性調整子元素的水平對齊方式：

1.  
   #wrap{
2.  
   display: flex;
3.  
   justify-content: flex-start;
4.  
   }

flex-start：

默認，圖同上。

flex-end：

center：

space-around：

space-between：

不過當父元素寬度不夠時， flex 默認是不會換行的，而是會等比例壓縮，縮放比例 flex-shrink 屬性或復合屬性 flex 相關。

通過 flex-wrap 屬性可以使其換行，該值有三個取值 nowrap、 wrap、 wrap-reverse，默認為 nowrap。

1.  
   #wrap{
2.  
   display: flex;
3.  
   flex-wrap: nowrap;
4.  
   }

nowrap

默認，圖略。

wrap

wrap-reverse