【筆記】學習CSS佈局15——inline-box
阿新 • • 發佈：2018-12-01
你可以建立很多網格來鋪滿瀏覽器。在過去很長的一段時間內使用 float 是一種選擇，但是使用 inline-block 會更簡單。讓我們看下使用這兩種方法的例子：
困難的方式（使用浮動）
<!DOCTYPE html> <html> <head> <style type="text/css"> .box { float:left; width:200px; height:100px; margin:1em; background-color:#6ac5ac; } .after_box { clear:left; background-color:#d64078; } </style> </head> <body> <div class="box"> 我在浮動！ </div> <div class="box"> 我在浮動！ </div> <div class="box"> 我在浮動！ </div> <div class="box"> 我在浮動！ </div> <div class="box"> 我在浮動！ </div> <div class="box"> 我在浮動！ </div> <div class="box"> 我在浮動！ </div> <div class="box"> 我在浮動！ </div> <div class="box"> 我在浮動！ </div> <div class="box"> 我在浮動！ </div> <div class="box"> 我在浮動！ </div> <div class="after_box"> 我在使用 clear，所以我不會浮動到上面那堆盒子的旁邊。 </div> </body> </html>
效果圖如下：
容易的方式（使用 inline-block）
你可以用 display 屬性的值 inline-block 來實現相同效果。
<!DOCTYPE html> <html> <head> <style type="text/css"> .box { display: inline-block; width:200px; height:100px; margin:1em; background-color:#6ac5ac; } .after_box { clear:left; background-color:#d64078; } </style> </head> <body> <div class="box"> 我是一個行內塊！ </div> <div class="box"> 我是一個行內塊！ </div> <div class="box"> 我是一個行內塊！ </div> <div class="box"> 我是一個行內塊！ </div> <div class="box"> 我是一個行內塊！ </div> <div class="box"> 我是一個行內塊！ </div> <div class="box"> 我是一個行內塊！ </div> <div class="box"> 我是一個行內塊！ </div> <div class="box"> 我是一個行內塊！ </div> <div class="box"> 我是一個行內塊！ </div> <div class="box"> 我是一個行內塊！ </div> <div class="after_box"> 這次我可沒有用 clear 。太棒了！ </div> </body> </html>
效果圖如下：
你得做些額外工作來讓IE6和IE7支援 inline-block 。有些時候人們談到 inline-block 會觸發叫做 hasLayout 的東西，你只需要知道那是用來支援舊瀏覽器的。如果你對此很感興趣，可以在前面那個連結中找到更詳細的資訊。否則我們就繼續下去吧。