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

實現(xiàn)一個浮動布局，紅色容器中每一行的藍(lán)色容器數(shù)量隨著瀏覽器寬度的變化而變化，就如下圖：

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

1. 通過左浮動實現(xiàn)

要實現(xiàn)這樣一個布局，我們首先需要如下的 HTML： <div id="float-container"><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div> </div>

然后開始寫 CSS 吧，就像這樣： #float-container {background-color: red; } .float-element {float: left;width: 50px;height: 30px;background-color: blue;margin: 10px; }

使每個小容器向左浮動，再設(shè)定一個邊距，一個根據(jù)瀏覽器寬度自適應(yīng)變化位置的浮動布局就搞定收工了？當(dāng)然不會，效果會像這樣：

咦，說好的紅色背景大容器呢，怎么躲起來啦？檢查一番，原來是忘了給大容器 div 設(shè)定寬高度了，那就設(shè)定一下寬高度。既然要求了大容器自適應(yīng)，那么我們就分別設(shè)定為 100% 吧： #float-container {background-color: red;height: 100%;width: 100%; } .float-element {float: left;width: 50px;height: 30px;background-color: blue;margin: 10px; }

好啦，刷新一下。大容器咋還是沒出來？

現(xiàn)在讓我們分析一下吧，為何看不見大容器？因為 div 如果沒有包裹元素的話，百分比寬高度是不會產(chǎn)生效果的。

那么為什么大容器明明包裹著九個 div，百分比寬高度卻沒有產(chǎn)生效果呢？因為小容器都設(shè)定為左浮動，已經(jīng)脫離文檔流，大容器并沒有包圍小容器，表現(xiàn)出高度為0（高度塌陷）。接下來我們想要大容器自適應(yīng)，又不想使小容器失去浮動的特性，能夠隨著寬度變化自動調(diào)整每一行的個數(shù)，應(yīng)該怎么辦？我們需要閉合浮動元素，使其包含框表現(xiàn)出正常的高度。是時候請出我們的 BFC 大神啦，對，我已經(jīng)連續(xù)三篇實例博文提到 BFC 原理了，因為這個原理就是這么有用啊（該處原理的詳細(xì)介紹請參考一絲大神的《那些年我們一起清除過的浮動》）。現(xiàn)在我們在大容器加上 overflow: hidden; 就可以自動清理其包含的任何浮動元素，接下來看看最終的 DEMO，試著調(diào)整一下寬度，是不是已經(jīng)實現(xiàn)了想要的效果？

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

2. 通過 inline-block 實現(xiàn)

只能通過左浮動完成這個實例？并不是，我們還有 inline-block。inline-block 可以像行內(nèi)元素一樣水平地依次排列，但框的內(nèi)容仍然符合塊級框的行為。通過這一特性，我們可以利用 inline-block 像浮動一樣創(chuàng)建很多網(wǎng)格鋪滿容器，并且不需要清除浮動。當(dāng)然整個布局過程也比左浮動簡便了一些，如下面的 DEMO：

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

---

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

轉(zhuǎn)載于:https://www.cnblogs.com/honoka/p/5164616.html

總結(jié)

以上是生活随笔為你收集整理的CSS 布局实例系列（四）如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。