CSS3列合理布局的多种多样主要表现方式

日期:2020-08-28 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

1、两边定宽正中间自融入合理布局

思路1:  float

【1】float + margin + calc

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflowhidden;}   
  4. .left,.rightright{floatleft;width100px;}   
  5. .center{floatleftwidth:calc(100% - 240px);margin: 0 20px;}   
  6. </style>   
  7.   
XML/HTML Code拷贝內容到剪贴板
  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拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflowhidden;}   
  4. .left,.rightright{positionrelative;floatleft;width100px;}   
  5. .centerWrap{floatleftwidth:100%; margin: 0 -100px;}   
  6. .center{margin: 0 120px;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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.     

思路2: inline-block

【1】inline-block + margin + calc

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{font-size: 0;}   
  4. .left,.rightright,.center{display:inline-blockvertical-aligntop;font-size16px;}   
  5. .left,.rightright{width100px;}   
  6. .center{width: calc(100% - 240px); margin: 0 20px;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{font-size: 0;}   
  4. .left,.rightright,.centerWrap{display:inline-blockvertical-aligntop;font-size16px;}   
  5. .left,.rightright{width100px;position:relative;}   
  6. .centerWrap{width: 100%; margin: 0 -100px;}   
  7. .center{margin: 0 120px;}   
  8. </style>   
  9.   
XML/HTML Code拷贝內容到剪贴板
  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.   

 

思路3: table

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: table; width: 100%;table-layoutfixed;}   
  4. .left,.rightright,.centerWrap{display:table-cell;}   
  5. .left,.rightright{width100px;}   
  6. .center{margin: 0 20px;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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.   

 

思路4: absolute

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{positionrelative;height:40px;}   
  4. .left,.rightright,.center{positionabsolute;}   
  5. .left{left: 0;width:100px;}   
  6. .rightright{rightright: 0;width100px;}   
  7. .center{left120pxrightright120px;}   
  8. </style>   
  9.   
XML/HTML Code拷贝內容到剪贴板
  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>  

 

思路5: flex

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: flex;}   
  4. .left,.rightright{width100px;}   
  5. .center{flex: 1; margin: 0 20px;}   
  6. </style>   
  7.   
XML/HTML Code拷贝內容到剪贴板
  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、多列定宽1侧自融入合理布局

这类合理布局与单列定宽单列自融入合理布局十分类似

思路1: float

【1】float + margin

缺陷是IE6-访问器的3px的bug,和当自融入列中有元素消除波动时,会使该元素不与左边波动元素同行业,从而出現文本下沉状况

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflowhidden;}   
  4. .left,.center{floatleft;width100px;margin-right20px;}   
  5. .rightright{margin-left240px;}   
  6. </style>   
  7.   
XML/HTML Code拷贝內容到剪贴板
  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拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflowhidden;}   
  4. .left,.center{floatleft;width100px;margin-right20px;}   
  5. .rightright{floatleftwidth: calc(100% - 240px);}   
  6. </style>   
  7.   
XML/HTML Code拷贝內容到剪贴板
  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拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflowhidden;}   
  4. .left,.center{positionrelativefloatleft;width100px;margin-right20px;}   
  5. .rightWrap{floatleftwidth: 100%; margin-left: -240px;}   
  6. .rightright{margin-left:240px;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflowhidden;}   
  4. .left,.center{positionrelativefloatleft;width100px;margin-right20px;}   
  5. .rightright{overflowhidden;zoom:1;}   
  6. </style>   
  7.   
XML/HTML Code拷贝內容到剪贴板
  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

【1】inline-block + margin + calc

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{font-size: 0;}   
  4. .left,.rightright,.center{display:inline-blockvertical-aligntop;font-size16px;}   
  5. .left,.center{width100px;margin-right:20px;}   
  6. .rightright{width: calc(100% - 240px);}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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拷贝內容到剪贴板
  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: ⑵40px;}   
  7. .right{margin-left: 240px;}   
  8. </style>  
  9.   
XML/HTML Code拷贝內容到剪贴板
  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.   

 

思路3: table

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: table; width: 100%;table-layoutfixed;}   
  4. .leftWrap,.centerWrap,.rightright{display:table-cell;}   
  5. .leftWrap,.centerWrap{width120px;}   
  6. .left,.center{margin-right20px;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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.   

 

思路4: absolute

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{positionrelative;width:100%;height:40px;}   
  4. .left{positionabsolute;left:0;width:100px;}   
  5. .center{positionabsolute;left:120px;width100px;}   
  6. .rightright{positionabsolute;left:240pxrightright:0;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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.   

 

思路5: flex

CSS Code拷贝內容到剪贴板
  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拷贝內容到剪贴板
  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、正中间定宽两边自融入合理布局

思路1: float

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflowhidden;}   
  4. .left{floatleft;margin-right20px;}   
  5. .center{floatleft;width100px;margin-right20px;}   
  6. .rightright{overflowhidden;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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.   

 

思路2: table

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: table; width: 100%;}   
  4. .leftWrap{displaytable-cellwidth: 0.1%;}   
  5. .centerWrap{displaytable-cell;width120px;}   
  6. .left,.center{margin-right20px;}   
  7. .rightright{display:table-cell;}   
  8. </style>   
  9.   
XML/HTML Code拷贝內容到剪贴板
  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.   

 

思路3: flex

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: flex;}   
  4. .left{margin-right20px;}   
  5. .center{width100px;margin-right20px;}   
  6. .rightright{flex: 1;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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>  

 

4、1侧定宽多列自融入合理布局

思路1: float

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflowhidden;}   
  4. .left{floatleft;width100px;margin-right20px;}   
  5. .center{floatleft;margin-right20px;}   
  6. .rightright{overflowhidden;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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.   

思路2: table

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: table; width: 100%;}   
  4. .leftWrap{displaytable-cellwidth120px;}   
  5. .centerWrap{displaytable-cell;width: 0.1%;}   
  6. .left,.center{margin-right20px;}   
  7. .rightright{display:table-cell;}   
  8. </style>   
  9.   
XML/HTML Code拷贝內容到剪贴板
  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.   

 

思路3: flex

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: flex;}   
  4. .left{width100px;margin-right20px;}   
  5. .center{margin-right20px;}   
  6. .rightright{flex: 1;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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.   

 

5、3列自融入合理布局

思路1: float

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflowhidden;}   
  4. .left,.center{floatleft;margin-right20px;}   
  5. .rightright{overflowhidden;}   
  6. </style>   
  7.   
XML/HTML Code拷贝內容到剪贴板
  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.   

 

思路2: table

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: table; width: 100%;}   
  4. .leftWrap,.centerWrap{displaytable-cell;width: 0.1%;}   
  5. .left,.center{margin-right20px;}   
  6. .rightright{display:table-cell;}   
  7. </style>   
  8.   
XML/HTML Code拷贝內容到剪贴板
  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.   
     

思路3: flex

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display: flex;}   
  4. .left,.center{margin-right20px;}   
  5. .rightright{flex: 1;}   
  6. </style>   
  7.   
XML/HTML Code拷贝內容到剪贴板
  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.   


 

总结

  3列合理布局相近于大号的多列合理布局。不管是甚么合理布局方法,无外乎必须运用float、inline-block、table、absolute和flex这5种合理布局特性,随后再相互配合负margin、calc()涵数、bfc、提升构造等来完成合理布局

  自融入包含两种状况:1种是宽度由內容撑开,1种是宽度全自动撑满父元素剩下宽度

  可完成宽度由內容撑开的特性有: float、inline、inline-block、table、table-cell、absolute、fixed和flex

  可完成宽度全自动撑满父元素剩下宽度的特性有: overflow(相互配合float)、table、flex

原文连接:http://www.cnblogs.com/xiaohuochai/p/5455905.html