目前測試支持的瀏覽器： 兼容IE10及以上、Chrom、Firefox瀏覽器。 假如考慮IE10以下瀏覽器，可以考慮其他寫法。 話不多說，上代碼： <div style="background: green; display: flex;"> ...

...

　　css實現左右布局顯示是前端進行頁面設計的基礎，也是全面了解並學習css一個很好的切入點，因為其中會涉及到對許多css基礎點的認知。實現css入門，理解左右布局的實現方式是必經之路，同時也能使我們在項目中涉及前端編碼的部分受益。　 　　下面我們就介紹自己總結的7種css實現前端左右 ...

1. position定位 2. 使用-webkit-box彈性盒子布局，使用ie8+，Chrome，火狐，同時使用移動 3. table布局 4. display:inline-block ...

參考教程： http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 上圖： ...

css3新引入的flex在某些情況下布局非常實用 因為它是彈性盒子所以自適應效果會很棒 不過各項布局方案還是各有優劣 實現的是基本版的三列布局 很簡單 ...

摘自阮老師的博客 點擊查看運行效果 ...

...