網頁開發中經常會遇到下面這樣的情景，每個模組的高度不一樣，又是不定高，用js動態獲取又顯得沒必要，總結了以下兩個小技巧：
!(
// html
// some code
// some code
// some code
// css
.left,right
.center
.box
.box>div
之所以沒有給 div 指定高度，是因為我們事先並不知道這個標籤會佔多高，而且就算我們知道，直接為所有 div 硬性的設定乙個高度也是沒有靈性的做法。
下面來解釋它的工作原理，首先， padding-bottom: 10000px會讓三個盒子拉伸的非常高，然後利用 margin-bottom: -10000px將各個元素切割掉 10000px，最後父元素將超出的部分隱藏，就出現了這個效果。
設定完以上**，現在的情況就變成了這樣。
!(備註： 因為給父元素設定了overflow：hidden;要是子元素有需要超出父元素的情況則會出問題，如子元素有日期外掛程式等。
不得不說，上面的方法很好用，不過我們還能夠更簡潔一點，簡潔的讓你不敢相信！其實，我們只需要為父布局設定一行就可以了！
而且，之前在沒有利用 flex 的時候，我們為了讓三個元素保持在同一行，還不得不為每個 div.item 設定浮動屬性。
那麼為什麼 display: flex 就可以完成以上那麼多**才能夠完成的任務呢？這依賴於 align-items 屬性，它的預設值是 stretch，也就是在輔軸上將所有子專案拉伸為同一高度（或寬度）以保持對齊。
css技巧之多列等高
這裡的多列等高，是指列高由內容決定，所以是不確定的 利用padding bottom margin bottom正負值相抵 html container left 我是left right 我是right 現在我的高度比left高，但left用它的padding bottom補償了這部分高度 cle...
CSS布局奇淫技巧之 多列等高
什麼是等高布局?先來看乙個案例 上圖中的頁面的主體內容是兩列結構，左列是用來導航的，右列是用來顯示內容的。我們看到它們有乙個共同的邊框，中間還有一條分隔線，左右兩列的高度都是不固定的。這種情況下就需要兩列的高度保持一致了，左邊高度增加，右邊也跟著增加，右邊高度增加，左邊同樣也要增加，否則就會出現 斷...
CSS技巧 2 多列等高布局
前言 最近，面試的時候都碰到一些關於利用css實現多列等高布局或者一側寬度固定，另一側寬度自適應的問題，下面稍微總結一下 規定下面的布局，實現多列等高布局，要求兩列背景色等高。1 div class container 2 div class left 多列等高布局左 多列等高布局左 div 3 d...