1. 程式人生 > >css3彈性佈局中的兩列寬度自適應佈局和兩列右列寬度自適應佈局

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>