很多年前，在css-tricks發布了這個想法，隨著時間的改變，我們不斷更新這個話題。當你想實現兩列等寬，左邊一些內容，右邊一些內容時，基本上都需要在乙個容器的內部設定兩個高度相等的列。每一面正好占用容器的一半，並且可以明顯的區分他們。在css中有很多方法都可以實現，那麼來看看如何用多種方法實現這種兩列等寬布局。
乙個簡單的方法就是我們可以使用漸變改變背景顏色。一半使用一種顏色另一半使用其他顏色。然而，並不是從乙個顏色過渡到另一種顏色，而是在中間設定乙個零空間顏色。
.container
這只能在單個容器元素內工作。這也意味著如果想讓它的內容填充容器的兩側，就需要採用浮動或者其他布局方法。
另一種方法是在父容器內設定兩個子容器，使用絕對定位，利用百分比將他們分離，並設定背景。這種方法的優點是這兩個子容器可以容納自己的內容。
id="lvxoym" src="" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="width: 100%; overflow: hidden;">
絕對定位有時是乙個完美的解決方案，但有時也不太好用。父元素需要設定高度，但是這樣做內容無法自適應（內容更改!），更不要說絕對定位會脫離文件流。所以，很難達到所有的要求，但我們可以將其他內容放在下面。
是的，table布局很老（更不用提它瀏覽器渲染問題和布局的不靈活性）。然而，我們可以使用display: table-cell;屬性，這樣可以在html中在不使用table的情況下方便建立布局。總之，我們將語義化的父元素新增到**中，其子元素放入單元格中。這些都是用css實現的哦！
id="pwxonm" src="" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="width: 100%; overflow: hidden;">
你甚至可以很容易在斷點處改變display的屬性，使雙方在很小的螢幕上疊加。display: table和其他屬性都支援ie8以上，甚至包括舊版本的安卓。所以，這種方法非常安全！
可以使用我們的好朋友float將相鄰的容器進行布局。這種方法的優點是避免使用絕對定位出現一些之前提過的問題。
id="pqxvwv" src="" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="width: 100%; overflow: hidden;">
這個例子，我們明確的給他們設定了高度，我們不能在預設情況下獲得float的能力，在這種情況下你可以使用背景色漸變的技巧讓他們看起來是連在一起的，或者使用負外邊距等。
你還需要記住父元素需要使用清除浮動，確保正常的文件流。
如果認為清除浮動很麻煩，那麼，display: inline-block是另一種選擇。但需要使用乙個技巧就是確保元素之間沒有空白間隙，否則，右半部分將會被渲染到下一行。
id="doqeoj" src="" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="width: 100%; overflow: hidden;">
這裡沒有用inline-block可以幫助我們解決兩側高度相等的問題。所以，這一點你一定要清楚。
這裡有很多方法解決上述空白間距的問題
使用flexbox是一種非常好的方法，只是需要注意它侷限於ie10，你需要使用字首加屬性值來得到最好的相容。
使用這種方法，可以將父元素變為乙個可伸縮的盒子，子元素平分其空間大小。不需要設定任何的寬度以及高度！flexbox知道如何做，因為預設的設定就是如此。例如，flex-direction: row;和align-items: stretch;這些都是預設值，所以我們不需要設定。為了確保可以實現要求，兩側都要設定flex: 1，這樣可以使他們平均分配空間大小。
id="waqbkw" src="" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="width: 100%; overflow: hidden;">
在上面的例子中，容器內容是也可以自適應，為了更好的展示我們將內容水平垂直居中。
對於那些總是嘗試新技術的人來說，css網格布局是flexbox和table布局的結合體。換句話說，在定義乙個容器時，可靈活的將子元素拆分為列和單元格。
如果下面的單元格疊加了，說明你的瀏覽器不支援 css grids。在寫這篇文章時，僅限於ie10+。
id="xbywma" src="" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="width: 100%; overflow: hidden;">
在這裡網格布局有可能大材小用，但是，用css可以做這麼多事情難道不是很酷麼？
**：
實現三欄布局的幾種方法
三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如 網的首頁，就是個典型的三欄布局 即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。我們不妨假定這樣乙個布局 高度已知，其中左欄 右欄寬度各為300px,中間自適應，可以通過幾種方法來實現？以及各自的優缺...
實現三欄布局的幾種方法
三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如 網的首頁，就是個典型的三欄布局 即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。我們不妨假定這樣乙個布局 高度已知，其中左欄 右欄寬度各為300px,中間自適應，可以通過幾種方法來實現？以及各自的優缺...
實現瀑布流式布局的幾種方法
1 傳統多列浮動 定義多個div左浮動成多列，在每個div裡插入一推也是左浮動的div。於是就實現了那種參差不齊的效果。2 直接用css3樣式實現 定義乙個div直接設定它的屬性 column count 列數 把那些小塊div放在這個大的div中就能實現這種瀑布流效果。但這種css3屬性在一些低階...