css3彈性佈局中的兩列寬度自適應佈局和兩列右列寬度自適應佈局
一 佈局可以有float,和position(絕對定位和相對定位)來設定,在這裡就不多介紹,而是來介紹其他的佈局型別
二
<1>一列固定寬度。。 ***想必這個大家都知道的直接給這個div的css中設定寬度和長度就可以了。
<2>一列自適應 這裡就是給div的css中給長寬高都設定成*百分比*就可以了(width:70%; height:60%;),這樣即便改變瀏覽器的視窗的話,其div的寬度和高度維持在當前瀏覽器寬的70%,和高的60%。
<3>兩列固定寬度:話不多說直接上程式碼了
<style>
#left{ width:200px;
height:200px;
float:left;
background-color:pink;
}
#right{ width:200px;
height:200px;
float:left;
backgroung-color:green;
}
</style>
<body>
<div id=""left></div>
<div id="right></div>
</body>
<3>兩列寬度自適應佈局
<style type="text/css">
#left{ width:20%;
height:300px;
background-color: pink;
float:left;}
#right{ width:75%;
height:300px;
background-color: green;
float:left;}
</style>
<body><div id="left"></div>
<div id="right"></div>
</body>
</body>
*****注意這裡設定那個百分比的時候不能是100%更不能超過100%因為這裡很多的元素都有自己的預設屬性
<4>兩列右列寬度自適應
這裡右列將會根據瀏覽器的視窗大小自己適應,在css中只需要設定右列的寬度就可以了。********注意注意這裡只是對左邊的盒子設定了浮動呦
<style>
#left{ width:200px;
height:300px;
background-color: pink;
float:left;}
#right{ height:300px;
background-color: green;
}
</style>
<5>三列浮動中間寬度自適應
這裡就是對左邊的盒子設定固定的寬度並且居左顯示,右邊的寬度設定固定的寬度並且居右顯示,那麼中間的*****那一列需要在左列和右列的中間,
根據左右列的間距變化自動適應。
<style>
#left{ width:200px;
height:300px;
background-color: pink;
position:absolute; left:0px;top:0px;}
#center{ background-color:blue;
height:300px;
margin-left:200px;
margin-right:200px;
}
#right{ width:200px;
height:300px;
background-color: green;
position:absolute; right:0px;top:0px;}
</style><body>
<div id="left"><div>
<div id="center"></div>
<div id="right"></div>
</body>