古老的CSS同高列問題

世有因果知因求果發表於2017-05-08
CSS

今日在網頁設計時，遇到了希望頁面的幾列同高需求的實現問題，蒐羅了一下google,找到以下文章，感覺不錯，翻譯過來，同時作為學習加深印象。

https://css-tricks.com/fluid-width-equal-height-columns/

 相同高度的列布局在web design領域是個很常見的需求。如果所有列都使用相同的background,那麼所謂同高列在這裡就沒有什麼關係了，因為我們可以在這些列的父元素那裡設定background就好了。但是如果任何一列希望有不同的背景色，那麼就不同了，我們必須無論其內容多高，所有column隨著最高的列的高度保持同高就很重要了。

問題：

我們希望達成的效果

為了解決上面的問題，達成上面的目標，如果設計是Non-fluid width寬度的，那麼這個task就相當簡單了。對於定寬等高layout，最好的方案是 Faux Columns 方案：所有的列都被一個.col容器元素包裹，並且容器有一個包含等高定寬劃分的image background，這樣即便內容並不相同，但是視覺上就實現了等高。

然而，如果設計要求是fluid width的並且是multiple columns的，這個任務就開始變得更加困難了。我們再也不能夠使用一個靜態的圖片來模擬等高多列的視覺效果了。下文，就這個問題探討幾個不同的方案來：

1. 使用css3 gradients來建立columns

http://codepen.io/mariemosley/pen/01f15f7a2dfcff438d17cd77c298b710

2. 使用css2 pseduo elements

主要的想法是將parent wrapper設定為relative positioning. 然後三列都設定為1/3父元素的寬度。在父親元素使用：：before,after pseudo元素設定為absolute positioning

3.使用tables

4. 使用css display table

<div id="css-table">
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
</div>
#css-table {
  display: table;
}
#css-table .col {
  display: table-cell;
  width: 25%;
  padding: 10px;
}
#css-table .col:nth-child(even) {
  background: #ccc;
}
#css-table .col:nth-child(odd) {
  background: #eee;
}

http://codepen.io/mariemosley/pen/be5a044df9d23b8a1cee9dc8f2fd2f06

5. float + margin/padding補償方案

這個方案對所有column都使用一個warpper元素作為公共的父親，而這個wrapper設定為hidden overflow,它不僅clear floated columns,而且會將任何在其外部的內容隱藏起來。

這一點很重要，因為我們將強制列高度非常高，並且cutting them off with the hidden overflow.

The magical voodoo here is that while we force the columns taller with a huge amount of bottom padding, we suck the height of the wrapper back up with an equal amount of negative bottom margin. This gives us just the effect we need.

<div id="one-true" class="group">
  <div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>
#one-true { overflow: hidden; }
#one-true .col {
  width: 27%;
  padding: 30px 3.15% 0;
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}
#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; }
#one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; }
#one-true .col:nth-child(3) { left: 0; background: #eee; }
#one-true p { margin-bottom: 30px; } /* Bottom padding on col is busy */

 6. flexbox方案

<div class="flexbox">
  <div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>
.flexbox {      
  display: -webkit-flex;        
  display: -ms-flexbox;     
  display: flex;
  overflow: hidden;
}
.flexbox .col {
  flex: 1;
  padding: 20px;
}
.flexbox .col:nth-child(1) { 
  background: #ccc; 
  -webkit-order: 1; 
      -ms-flex-order: 1; 
          order: 1;
}
.flexbox .col:nth-child(2) { 
  background: #eee;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.flexbox .col:nth-child(3) { 
  background: #eee;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

body {
  padding: 20px;
}

7. javascript option

http://codepen.io/micahgodbolt/pen/FgqLc

 

相關文章