-
關于三列布局，中間自適應的布局方法 doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> *{margin:0;padding:0px;} .wrap{width:960px; margin:0 auto;} .left{width:200px;height:100px;background:#009;float:left;} .middle{background:#3F3;height:100px;border:1px solid #000;margin:0 300px 0 200px;} .right{width:300px;height:100px;background:#9F0;float:right;} </style> </head> <body> <div class="wrap"> <div class="left">200px</div> <div class="right">300px</div> <div class="middle">自適應寬度</div> </div> </body> 效果是一樣的，用float處理，只不過不class=“middle”方在right后。當right又浮動后，脫離文檔流。是中間一列在中間顯示，在設置margin將蓋注部分顯示出來，不過div順序不是很正常，不夠標準語義化。查看全部
-
浮動后面的元素如果不清除浮動， 就會當前面的元素不存在而占用其位置. 本例中main未設置高度,footer未清除浮動其css效果就會占用main位置 清除浮動方式： clear:both overflow:hidden 在有些情況下只能是用overflow:hidden來清除浮動查看全部
-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流 浮動和絕對定位脫離文檔流的區別 相同點：其他盒子都會無視被浮動或絕對定位的盒子； 不同點：盒子的內容會考慮被浮動的盒子，但仍然會無視絕對定位的盒子。查看全部
-
一列布局： 1，通常作為網站的首頁，一般固定寬度； 2，一列布局不適于存放文本，太長容易看串行。 3，真正開發，高度設置自動的，適于自動撐開；查看全部
-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流 浮動和絕對定位脫離文檔流的區別 相同點：其他盒子都會無視被浮動或絕對定位的盒子； 不同點：盒子的內容會考慮被浮動的盒子，但仍然會無視絕對定位的盒子。查看全部
-
三列兩側絕對定位、中間自適應查看全部
-
.top{height:100px;background:#ccc;} .main{background:red;height:500px} .left{ background:blue;height:500px;width:200px;position:absolute;left:0;} .right{background:#9c9;height:500px;width:100%;position:absolute;left:210px;} .foot{height:50px;background:#f63;clear:both;}查看全部
-
clear:both 清除浮動查看全部
-
三列布局： 1, margin:上 右 下 左; margin:0 300px 0 200px; 2,左側固定寬度 中間自適應寬度 右側固定寬度 使用float不能排成一行；使用定位position:absolute; 例：.left{ width:200px;height:500px;background:#ccc; position:absolute; left:0; top:0; } .middle{ height:500px; background:#999; margin:0 300px 0 200px; } .right{ width:300px; height:500px; background:#000; position:absolute; right:0; top:0;}查看全部
-
清除浮動：clear ： both；查看全部
-
.top{height:100px;background:#ccc;} .main{height:500px;background:red;} .left{ width:200px;height:500px;background:blue;position:absolute;left:0;} .right{height:500px;width:100%;background:#9c9;position:absolute;left:210px;} .foot{height:50px;background:#f63;}查看全部
-
.top{height:100px;background:#ccc;} .main{height:500px;background:red;} .left{ width:200px;height:500px;background:blue;position:absolute;left:0;} .right{height:500px;width:100%;background:#9c9;position:absolute;left:210px;} .foot{height:50px;background:#f63;}查看全部
-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流 浮動和絕對定位脫離文檔流的區別 相同點：其他盒子都會無視被浮動或絕對定位的盒子； 不同點：盒子的內容會考慮被浮動的盒子，但仍然會無視絕對定位的盒子。查看全部
-
一個浮動就搞定查看全部
-
style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0} .main{ height:600px;mnargin:o 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0;position:absolute;right:0;toop:0 background:#FCC;}查看全部
舉報
0/150
提交
取消