-
position:absolute;
position:relative;
查看全部 -
絕對定位 position:absolute; left:0; top:0
? ? ? ? ? ? ? position:absolute; right:0; top:0
查看全部 -
css---利用浮動+定位----實現UI
查看全部 -
2018-08-18
查看全部 -
div結尾處清除浮動：clear: both<br />查看全部
-
使div水平居中：margin: 0 auto;
查看全部 -
三列布局:
一：絕對定位
//**左邊絕對定位
position: absolute;
left: 0; top: 0;
//**右邊絕對定位
position: absolute;
right: 0; top: 0;
//**中間列自適應寬度
margin: 0 300px 0 200px;
(中間空格的話設置310px; 210px;)
查看全部 -
三列布局：
left與right絕對定位，固定寬度；
middle設計左右margin。實現自適應。
查看全部 -
float：right會讓div往右邊浮動，而.left則已經往左浮動了，故而一個左貼邊，一個右貼邊，中間自然露出來大片的底色（紅色）。所以你這里的margin-left：210px并沒有起到實質上的作用，因為中間的區域估計有上千px。要想用浮動來實現這樣的效果，必須都設置成float：left。
但是本題的任務要求：右側（right）先加載，左側（left）后加載。
而且下面的div代碼也是right在前面，left在后面。如果是left在前面，right在后面，那么可以直接使用float：left，從左到右按順序向左浮動，再設置right的margin-left：10px即可實現。
本題的精髓就在于left在后面，right反而在前面，所以只能只用絕對定位來實現。
查看全部 -
margin:0 auto
查看全部 -
他們設置 310 和210 是為了讓效果圖和案例一樣，中間div和兩邊有空白的間距。由于中間的div設置的margin 所以，它的距離是相對于body的距離，你疑問為啥不是和左右兩個div的距離，是因為，左右兩個div由于設置了absolute 脫離了文檔流，也就是相當于相對其他div來說，它類似于透明的空氣一般。
查看全部 -
元素脫離文檔流
不會一個元素一行一行的排版，而是可以拿出來跟在父元素左右，float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。
查看全部 -
body{margin:0;padding:0;}
.left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0}
.middle{height:500px;background:#999;margin:0 300px o 200px}
.right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0}
查看全部 -
margin:0 auto//居中對齊
查看全部 -
height:100px margin:0 auto查看全部
舉報