CSS 布局執行個體系列（四）如何?容器中每一行的子容器數量隨著瀏覽器寬度的變化而變化？，css容器

CSS 布局執行個體系列（四）如何?容器中每一行的子容器數量隨著瀏覽器寬度的變化而變化？，css容器

Hello，小朋友們，還記得我是誰嗎？對了，我就是~超威~好啦，言歸正傳，今天的布局執行個體是：

實現一個浮動布局，紅色容器中每一行的藍色容器數量隨著瀏覽器寬度的變化而變化，就如：

肯定有人心裡犯嘀咕了，哈~這麼簡單，不就是全部左浮動嘛，這也好意思拿出來講？別急啊，其實裡面的坑還是挺多的，且待我一個個填上。

1. 通過左浮動實現2. 通過 inline-block 實現

只能通過左浮動完成這個執行個體？並不是，我們還有 inline-block。inline-block 可以像行內元素一樣水平地依次排列，但框的內容仍然符合塊級框的行為。通過這一特性，我們可以利用 inline-block 像浮動一樣建立很多網格鋪滿容器，並且不需要清除浮動。當然整個版面配置階段也比左浮動簡便了一些，如下面的 DEMO：

See the Pen inline-block-container by xal821792703 (@honoka) on CodePen.

 最後感謝大家的閱讀，歡迎前往我的 repo 查看原始碼整理，有任何問題也請盡情向我吐槽。