-
三列布局比較特殊的例子，讓左右列固定列寬，中間自動適應寬度，需要用到position，不能用float（float會導致頁面凌亂）<br> .left{width:200px;height:500px;background:red;position:absolute;left:0}<br> .middle{height:500px;background:green;margin:0 300px 0 200px}（這里4個值代表上邊距、右邊距、下邊距、左邊距）<br> .right{width:300px;heigth:500px;backgroud:blue;position:absolute:right;right:0}查看全部
-
float:left/right左右浮動，兩列布局可用到查看全部
-
固定化兩列布局；查看全部
-
自適應兩列布局；查看全部
-
網頁的基本布局查看全部
-
margin:0 auto;使塊元素水平居中，0代表上下，auto代表左右查看全部
-
自適應的盒子設置寬度和高度時是用%x來設置的查看全部
-
清楚浮動的方法綜合一下答案： 一：clear:both(/left/right); 二：overflow:hidden;width:100%; 三：給main設置高度：.main{width:960px; {height:600px};margin:0 auto;} 四：margin:600px 0 0 0; 推薦使用方法一和方法二，在給footer使用overflow的時候，千萬不要忘記設置它的寬度。查看全部
-
有三種情況使得元素離開文檔流而存在，分別是浮動 絕對布局 固定定位查看全部
-
各種測試發現,在用position做三列布局的時候,中間設置margin自適應寬度,左右兩邊固定寬度必須設置一樣的才會得到結果, body{ margin:0; padding:0; font-size:30px; font-weight:bold} .left{width:200px; height:600px; background:#ccc; position:absolute;left:0; top:0} .main{height:600px;margin:0 210px 0 210px;background:#9CF} .right{height:600px; width:200px; position:absolute; top:0;right:0;background:#FCC;} 如果兩邊固定寬度值不一樣的話,就會出現中間自適應部分與右邊布局重疊,而與左邊布局中間很大空白,求大神解答一下是什么情況,我是新手,勿噴查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局編程挑戰</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;width:600px;margin:0 auto;background:#ccc;} .main{height:500px;width:600px;background:#F60;margin:0 auto;} .left{height:500px;width:200px;background:blue;float:left;} .right{height:500px;width:390px;background:green;float:right;} .foot{height:80px;width:600px;background:#369;margin:0 auto;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
上面的代碼沒有給main設置高度，而main里的內容又設置成了浮動，所以footer會跑到head的下面。 解決方法有兩個：1.清除浮動， clear:both; 2.為main設置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; } (from秋雨梧桐葉落時0)查看全部
-
三列布局自適應查看全部
-
左右浮動樣式設置查看全部
-
分欄又稱為分列，常見的布局分為：一列布局，二列布局，三列布局和混合布局查看全部
舉報
0/150
提交
取消