12-4浮動模型 · 初識HTML+CSS

塊狀元素這么霸道都是獨占一行，如果現在我們想讓兩個塊狀元素并排顯示，怎么辦呢？不要著急，設置元素浮動就可以實現這一愿望。任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。如下代碼可以實現兩個 div 元素一行顯示。 ~~~ div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div> ~~~ 效果圖 [![](http://img.mukewang.com/540e62c60001c56a06760417.jpg)](http://img.mukewang.com/540e62c60001c56a06760417.jpg) 當然你也可以同時設置兩個元素右浮動也可以實現一行顯示。 ~~~ div{ width:200px; height:200px; border:2px red solid; float:right; } ~~~ 效果圖 [![](http://img.mukewang.com/540e632b0001f5f506760417.jpg)](http://img.mukewang.com/540e632b0001f5f506760417.jpg) 又有小伙伴問了，設置兩個元素一左一右可以實現一行顯示嗎？當然可以： ~~~ div{ width:200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;} ~~~ 效果圖 [![](http://img.mukewang.com/540e63b50001f6a206760417.jpg)](http://img.mukewang.com/540e63b50001f6a206760417.jpg) ### 任務 **我也來試試，在右側的代碼編輯器中試一試使兩個欄目并排顯示出來且兩個欄目都是左對齊。** 1、在右側代碼編輯器中的第 11 行輸入下面代碼： ~~~ float:left; ~~~ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>浮動模型</title> <style type="text/css"> div{ border:2px red solid; width:200px; height:400px; } </style> </head> <body> <div id="div1">欄目1</div> <div id="div2">欄目2</div> </body> </html> ```