兩個及以上塊級元素（div為例）排列一行
阿新 • • 發佈：2019-01-01
1.浮動解決（float）-------> _ >萬能
demo程式碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body ,html { padding: 0px; margin: 0px;} .box1,.box2 { width: 200px;height: 200px;float: left用浮動（float）定位可以完美相容ie6，並且無中間留白。用金星老師的話就是-----完美！;}.box1 { border: 1px solid #ff0000;} .box2 { border: 1px solid #ffff00} </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> </html>
ie6下效果圖：
其他瀏覽器（這裡是谷歌）：
對於另一種方法就是用display：即改如下程式碼
/*.box1,.box2 { width: 200px;height: 200px;float: left;}*/ .box1,.box2 { width: 200px;height: 200px;display: inline-block;}
下面看下ie6的效果圖：
ie8及以上效果圖：
其他瀏覽器（這裡是谷歌）：
可以看到用display並不能相容ie6，而且用display，中間會有留白，至於為什麼，現在本宮還不造呢？
把css程式碼作如下改動：
.box1,.box2 { width: 200px;height: 200px;*display: inline;}
ie6，7效果圖：
丟失了高寬度ie8及以上，其他瀏覽器任然不能一行排列。
以上還遺留問題呢，原因下回分解，因為我也不造。