欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS三列布局的多種表現(xiàn)形式

  發(fā)布時間：2016-05-04 11:09:26   作者：佚名   我要評論
本文為大家詳細(xì)介紹三列布局，分為兩側(cè)定寬中間自適應(yīng)、兩列定寬一側(cè)自適應(yīng)、中間定寬兩側(cè)自適應(yīng)、一側(cè)定寬兩列自適應(yīng)和三列自適應(yīng)五種情況，感興趣的小伙伴們可以參考一下

一、兩側(cè)定寬中間自適應(yīng)布局

思路一:  float

【1】float + margin + calc

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflow: hidden;}   
  4. .left,.rightright{float: left;width: 100px;}   
  5. .center{float: left; width:calc(100% - 240px);margin: 0 20px;}   
  6. </style>   
  7.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.         <p>center</p>  
  8.     </div>       
  9.     <div class="right"  style="background-color: lightgreen;">  
  10.         <p>right</p>  
  11.     </div>           
  12. </div>  
  13.   

【2】float + margin + (fix)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflow: hidden;}   
  4. .left,.rightright{position: relative;float: left;width: 100px;}   
  5. .centerWrap{float: left; width:100%; margin: 0 -100px;}   
  6. .center{margin: 0 120px;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>               
  5.     <div class="centerWrap" style="background-color: red;">  
  6.         <div class="center" style="background-color: pink;">  
  7.             <p>center</p>  
  8.             <p>center</p>  
  9.         </div>           
  10.     </div>  
  11.     <div class="right"  style="background-color: lightgreen;">  
  12.         <p>right</p>  
  13.     </div>               
  14. </div>  
  15.     

思路二: inline-block

【1】inline-block + margin + calc

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{font-size: 0;}   
  4. .left,.rightright,.center{display:inline-block; vertical-align: top;font-size: 16px;}   
  5. .left,.rightright{width: 100px;}   
  6. .center{width: calc(100% - 240px); margin: 0 20px;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>               
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.         <p>center</p>  
  8.     </div>           
  9.     <div class="right"  style="background-color: lightgreen;">  
  10.         <p>right</p>  
  11.     </div>               
  12. </div>  
  13.   

【2】inline-block + margin + (fix)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{font-size: 0;}   
  4. .left,.rightright,.centerWrap{display:inline-block; vertical-align: top;font-size: 16px;}   
  5. .left,.rightright{width: 100px;position:relative;}   
  6. .centerWrap{width: 100%; margin: 0 -100px;}   
  7. .center{margin: 0 120px;}   
  8. </style>   
  9.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="centerWrap" style="background-color: orange;">  
  6.         <div class="center" style="background-color: pink;">  
  7.             <p>center</p>  
  8.             <p>center</p>  
  9.         </div>           
  10.     </div>           
  11.     <div class="right"  style="background-color: lightgreen;">  
  12.         <p>right</p>  
  13.     </div>               
  14. </div>  
  15.   

 

思路三: table

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: table; width: 100%;table-layout: fixed;}   
  4. .left,.rightright,.centerWrap{display:table-cell;}   
  5. .left,.rightright{width: 100px;}   
  6. .center{margin: 0 20px;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="centerWrap" style="background-color: orange;">  
  6.         <div class="center" style="background-color: pink;">  
  7.             <p>center</p>  
  8.             <p>center</p>  
  9.         </div>           
  10.     </div>           
  11.     <div class="right"  style="background-color: lightgreen;">  
  12.         <p>right</p>  
  13.     </div>               
  14. </div>  
  15.   

 

思路四: absolute

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{position: relative;height:40px;}   
  4. .left,.rightright,.center{position: absolute;}   
  5. .left{left: 0;width:100px;}   
  6. .rightright{rightright: 0;width: 100px;}   
  7. .center{left: 120px; rightright: 120px;}   
  8. </style>   
  9.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.         <p>center</p>  
  8.     </div>                   
  9.     <div class="right"  style="background-color: lightgreen;">  
  10.         <p>right</p>  
  11.     </div>               
  12. </div>  

 

思路五: flex

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: flex;}   
  4. .left,.rightright{width: 100px;}   
  5. .center{flex: 1; margin: 0 20px;}   
  6. </style>   
  7.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.         <p>center</p>  
  8.     </div>                   
  9.     <div class="right"  style="background-color: lightgreen;">  
  10.         <p>right</p>  
  11.     </div>               
  12. </div>  
  13.   

 

二、兩列定寬一側(cè)自適應(yīng)布局

這種布局與單列定寬單列自適應(yīng)布局非常相似

思路一: float

【1】float + margin

缺點是IE6-瀏覽器的3px的bug，以及當(dāng)自適應(yīng)列中有元素清除浮動時，會使該元素不與左側(cè)浮動元素同行，從而出現(xiàn)文字下沉現(xiàn)象

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflow: hidden;}   
  4. .left,.center{float: left;width: 100px;margin-right: 20px;}   
  5. .rightright{margin-left: 240px;}   
  6. </style>   
  7.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.     </div>                   
  8.     <div class="right"  style="background-color: lightgreen;">  
  9.         <p>right</p>  
  10.         <p>right</p>  
  11.     </div>               
  12. </div>  
  13.   

 

【2】float + margin + calc

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflow: hidden;}   
  4. .left,.center{float: left;width: 100px;margin-right: 20px;}   
  5. .rightright{float: left; width: calc(100% - 240px);}   
  6. </style>   
  7.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.     </div>                   
  8.     <div class="right"  style="background-color: lightgreen;">  
  9.         <p>right</p>  
  10.         <p>right</p>  
  11.     </div>               
  12. </div>  
  13.   

 

【3】float + margin + (fix)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflow: hidden;}   
  4. .left,.center{position: relative; float: left;width: 100px;margin-right: 20px;}   
  5. .rightWrap{float: left; width: 100%; margin-left: -240px;}   
  6. .rightright{margin-left:240px;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.     </div>           
  8.     <div class="rightWrap">  
  9.         <div class="right"  style="background-color: lightgreen;">  
  10.             <p>right</p>  
  11.             <p>right</p>  
  12.         </div>               
  13.     </div>               
  14. </div>  
  15.   

 

【4】float + overflow

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflow: hidden;}   
  4. .left,.center{position: relative; float: left;width: 100px;margin-right: 20px;}   
  5. .rightright{overflow: hidden;zoom:1;}   
  6. </style>   
  7.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.     </div>           
  8.     <div class="right"  style="background-color: lightgreen;">  
  9.         <p>right</p>  
  10.         <p>right</p>  
  11.     </div>                           
  12. </div>  
  13.   

 

思路二: inline-block

【1】inline-block + margin + calc

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{font-size: 0;}   
  4. .left,.rightright,.center{display:inline-block; vertical-align: top;font-size: 16px;}   
  5. .left,.center{width: 100px;margin-right:20px;}   
  6. .rightright{width: calc(100% - 240px);}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.     </div>           
  8.     <div class="right"  style="background-color: lightgreen;">  
  9.         <p>right</p>  
  10.         <p>right</p>  
  11.     </div>                           
  12. </div>  
  13.   

 

【2】inline-block + margin + (fix)

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <style>  
  2. p{margin: 0;}   
  3. .parent{font-size: 0;}   
  4. .left,.rightWrap,.center{display:inline-block; vertical-align: top;font-size: 16px;}   
  5. .left,.center{position: relative;width: 100px;margin-right:20px;}   
  6. .rightWrap{width:100%; margin-left: -240px;}   
  7. .right{margin-left: 240px;}   
  8. </style>  
  9.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>       
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.     </div>           
  8.     <div class="rightWrap" style="background-color: green;">  
  9.         <div class="right"  style="background-color: lightgreen;">  
  10.             <p>right</p>  
  11.             <p>right</p>  
  12.         </div>           
  13.     </div>               
  14. </div>  
  15.   

 

思路三: table

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: table; width: 100%;table-layout: fixed;}   
  4. .leftWrap,.centerWrap,.rightright{display:table-cell;}   
  5. .leftWrap,.centerWrap{width: 120px;}   
  6. .left,.center{margin-right: 20px;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="leftWrap">  
  3.         <div class="left" style="background-color: lightblue;">  
  4.             <p>left</p>  
  5.         </div>           
  6.     </div>  
  7.     <div class="centerWrap">  
  8.         <div class="center" style="background-color: pink;">  
  9.             <p>center</p>  
  10.         </div>           
  11.     </div>  
  12.     <div class="right"  style="background-color: lightgreen;">  
  13.         <p>right</p>  
  14.         <p>right</p>  
  15.     </div>               
  16. </div>  
  17.   

 

思路四: absolute

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{position: relative;width:100%;height:40px;}   
  4. .left{position: absolute;left:0;width:100px;}   
  5. .center{position: absolute;left:120px;width: 100px;}   
  6. .rightright{position: absolute;left:240px; rightright:0;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>           
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.     </div>           
  8.     <div class="right"  style="background-color: lightgreen;">  
  9.         <p>right</p>  
  10.         <p>right</p>  
  11.     </div>               
  12. </div>  
  13.   

 

思路五: flex

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: flex;}   
  4. .left,.center{width:100px;margin-right:20px;}   
  5. .rightright{flex:1;}   
  6. </style>   
  7.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>           
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.     </div>           
  8.     <div class="right"  style="background-color: lightgreen;">  
  9.         <p>right</p>  
  10.         <p>right</p>  
  11.     </div>               
  12. </div>  
  13.   

 

三、中間定寬兩側(cè)自適應(yīng)布局

思路一: float

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflow: hidden;}   
  4. .left{float: left;margin-right: 20px;}   
  5. .center{float: left;width: 100px;margin-right: 20px;}   
  6. .rightright{overflow: hidden;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.         <p>left</p>  
  5.     </div>           
  6.     <div class="center" style="background-color: pink;">  
  7.         <p>center</p>  
  8.     </div>       
  9.     <div class="right"  style="background-color: lightgreen;">  
  10.         <p>right</p>  
  11.         <p>right</p>  
  12.     </div>                       
  13. </div>  
  14.   

 

思路二: table

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: table; width: 100%;}   
  4. .leftWrap{display: table-cell; width: 0.1%;}   
  5. .centerWrap{display: table-cell;width: 120px;}   
  6. .left,.center{margin-right: 20px;}   
  7. .rightright{display:table-cell;}   
  8. </style>   
  9.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="leftWrap">  
  3.         <div class="left" style="background-color: lightblue;">  
  4.             <p>left</p>  
  5.             <p>left</p>  
  6.         </div>               
  7.     </div>  
  8.     <div class="centerWrap">  
  9.         <div class="center" style="background-color: pink;">  
  10.             <p>center</p>  
  11.         </div>               
  12.     </div>  
  13.     <div class="right"  style="background-color: lightgreen;">  
  14.         <p>right</p>  
  15.         <p>right</p>  
  16.     </div>                       
  17. </div>  
  18.   

 

思路三: flex

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: flex;}   
  4. .left{margin-right: 20px;}   
  5. .center{width: 100px;margin-right: 20px;}   
  6. .rightright{flex: 1;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.         <p>left</p>  
  5.     </div>               
  6.     <div class="center" style="background-color: pink;">  
  7.         <p>center</p>  
  8.     </div>               
  9.     <div class="right"  style="background-color: lightgreen;">  
  10.         <p>right</p>  
  11.         <p>right</p>  
  12.     </div>                       
  13. </div>  

 

四、一側(cè)定寬兩列自適應(yīng)布局

思路一: float

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflow: hidden;}   
  4. .left{float: left;width: 100px;margin-right: 20px;}   
  5. .center{float: left;margin-right: 20px;}   
  6. .rightright{overflow: hidden;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>               
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.         <p>center</p>  
  8.     </div>               
  9.     <div class="right"  style="background-color: lightgreen;">  
  10.         <p>right</p>  
  11.         <p>right</p>  
  12.     </div>                       
  13. </div>  
  14.   

思路二: table

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: table; width: 100%;}   
  4. .leftWrap{display: table-cell; width: 120px;}   
  5. .centerWrap{display: table-cell;width: 0.1%;}   
  6. .left,.center{margin-right: 20px;}   
  7. .rightright{display:table-cell;}   
  8. </style>   
  9.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="leftWrap">  
  3.         <div class="left" style="background-color: lightblue;">  
  4.             <p>left</p>  
  5.         </div>               
  6.     </div>  
  7.     <div class="centerWrap">  
  8.         <div class="center" style="background-color: pink;">  
  9.             <p>center</p>  
  10.             <p>center</p>  
  11.         </div>               
  12.     </div>  
  13.     <div class="right"  style="background-color: lightgreen;">  
  14.         <p>right</p>  
  15.         <p>right</p>  
  16.     </div>                       
  17. </div>  
  18.   

 

思路三: flex

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: flex;}   
  4. .left{width: 100px;margin-right: 20px;}   
  5. .center{margin-right: 20px;}   
  6. .rightright{flex: 1;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>               
  5.     <div class="center" style="background-color: pink;">  
  6.         <p>center</p>  
  7.         <p>center</p>  
  8.     </div>               
  9.     <div class="right"  style="background-color: lightgreen;">  
  10.         <p>right</p>  
  11.         <p>right</p>  
  12.     </div>                       
  13. </div>  
  14.   

 

五、三列自適應(yīng)布局

思路一: float

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflow: hidden;}   
  4. .left,.center{float: left;margin-right: 20px;}   
  5. .rightright{overflow: hidden;}   
  6. </style>   
  7.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.         <p>left</p>  
  5.     </div>               
  6.     <div class="center" style="background-color: pink;">  
  7.         <p>center</p>  
  8.         <p>center</p>  
  9.     </div>               
  10.     <div class="right"  style="background-color: lightgreen;">  
  11.         <p>right</p>  
  12.         <p>right</p>  
  13.     </div>                       
  14. </div>  
  15.   

 

思路二: table

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: table; width: 100%;}   
  4. .leftWrap,.centerWrap{display: table-cell;width: 0.1%;}   
  5. .left,.center{margin-right: 20px;}   
  6. .rightright{display:table-cell;}   
  7. </style>   
  8.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="leftWrap">  
  3.         <div class="left" style="background-color: lightblue;">  
  4.             <p>left</p>  
  5.             <p>left</p>  
  6.         </div>               
  7.     </div>  
  8.     <div class="centerWrap">  
  9.         <div class="center" style="background-color: pink;">  
  10.             <p>center</p>  
  11.             <p>center</p>  
  12.         </div>               
  13.     </div>  
  14.     <div class="right"  style="background-color: lightgreen;">  
  15.         <p>right</p>  
  16.         <p>right</p>  
  17.     </div>                       
  18. </div>  
  19.   
     

思路三: flex

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: flex;}   
  4. .left,.center{margin-right: 20px;}   
  5. .rightright{flex: 1;}   
  6. </style>   
  7.   
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.         <p>left</p>  
  5.     </div>               
  6.     <div class="center" style="background-color: pink;">  
  7.         <p>center</p>  
  8.         <p>center</p>  
  9.     </div>               
  10.     <div class="right"  style="background-color: lightgreen;">  
  11.         <p>right</p>  
  12.         <p>right</p>  
  13.     </div>                       
  14. </div>  
  15.   


 

總結(jié)

　　三列布局類似于大號的兩列布局。無論是什么布局方式，無外乎需要應(yīng)用float、inline-block、table、absolute和flex這五種布局屬性，然后再配合負(fù)margin、calc()函數(shù)、bfc、增加結(jié)構(gòu)等來實現(xiàn)布局

　　自適應(yīng)包括兩種情況：一種是寬度由內(nèi)容撐開，一種是寬度自動撐滿父元素剩余寬度

　　可實現(xiàn)寬度由內(nèi)容撐開的屬性有： float、inline、inline-block、table、table-cell、absolute、fixed和flex

　　可實現(xiàn)寬度自動撐滿父元素剩余寬度的屬性有： overflow(配合float)、table、flex

相關(guān)文章

  • 一文匯總 CSS 兩列布局和三列布局的具體使用

    這篇文章主要介紹了一文匯總 CSS 兩列布局和三列布局的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小
    2020-06-28

  • 利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局

    這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考
    2016-09-12

  • CSS實現(xiàn)頁面兩列布局與三列布局的方法示例

    這篇文章主要介紹了CSS實現(xiàn)頁面兩列布局與三列布局的方法示例,包括寬度與高度的自適應(yīng)的示例,需要的朋友可以參考下
    2016-06-23

  • 用CSS實現(xiàn)三列DIV等高布局以傳達(dá)更好的視覺效果

    頁面布局中經(jīng)常遇到等高布局的情況，為了得到更好的視覺效果，就要實現(xiàn)DIV等高布局的效果。以最普遍的DIV三列布局來說
    2014-09-03

  • CSS三列布局兩端固定寬度中間自適應(yīng)

    CSS三列布局走出HTML布局陰影，兩端固定寬度，中間自適應(yīng)結(jié)構(gòu)，下面有個不錯的示例，大家可以參考下
    2014-02-27

  • CSS教程：三列固定網(wǎng)頁布局實例

    網(wǎng)頁制作Webjx文章簡介：我們的講解會包含一些標(biāo)準(zhǔn)元素，如logo、頂欄、導(dǎo)航欄、文本區(qū)域、 　　今天網(wǎng)頁教學(xué)網(wǎng)將向大家講解如何通過設(shè)計一個HTML/CS
    2009-04-02

  • 詳解CSS多種三列自適應(yīng)布局實現(xiàn)

    這篇文章主要介紹了詳解CSS多種三列自適應(yīng)布局實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2021-02-24

最新評論