浅析多列自融入合理布局的3种思路

2021-01-20 18:48 jianzhan

前面早已详细介绍过单列定宽单列自融入的多列合理布局，而多列自融入合理布局是指1列由內容撑开，另外一列撑满剩下宽度的合理布局方法。本文将从float、table和flex来详细介绍多列自融入合理布局的3种思路。

思路1: float

在单列定宽单列自融入的多列合理布局中，常常用float和负margin相互配合完成合理布局实际效果。但因为margin赋值只能是固定不动值，因此在多列全是自融入的合理布局中就已不可用。而float和overflow相互配合可完成多列自融入实际效果。应用overflow特性来开启bfc，来阻拦波动导致的文本围绕实际效果。因为设定overflow:hidden其实不会开启IE6-访问器的haslayout特性，因此必须设定zoom:1来适配IE6-访问器

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflow: hidden;zoom: 1;}   
  4. .left{float: left;margin-right: 20px;}       
  5. .rightright{overflow: hidden;zoom: 1;}   
  6. </style>  

 

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="right"  style="background-color: lightgreen;">  
  6.         <p>right</p>  
  7.         <p>right</p>  
  8.     </div>           
  9. </div>  

 思路2: table

若table元素不设定table-layout:fixed，则宽度由內容撑开。在某个table-cell元素的外层嵌套循环1层div，并设定充足小的宽度如width:0.1%

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display:table;width:100%;}   
  4. .leftWrap{display:table-cell;width:0.1%;}   
  5. .left{margin-right: 20px;}       
  6. .rightright{display:table-cell;}   
  7. </style>  

XML/HTML Code拷贝內容到剪贴板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="leftWrap" style="background-color: pink;">  
  3.         <div class="left" style="background-color: lightblue;">  
  4.             <p>left</p>  
  5.         </div>           
  6.     </div>  
  7.     <div class="right"  style="background-color: lightgreen;">  
  8.         <p>right</p>  
  9.         <p>right</p>  
  10.     </div>           
  11. </div>  

思路3: flex

flex延展性盒实体模型是是非非常强劲的合理布局方法。基础上，1般的合理布局方法都可以以完成

[留意]IE9-不适用
 

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display:flex;}     
  4. .rightright{margin-left:20px; flex:1;}   
  5. </style>  

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="right"  style="background-color: lightgreen;">  
  6.         <p>right</p>  
  7.         <p>right</p>  
  8.     </div>           
  9. </div>  

以上这篇浅析多列自融入合理布局的3种思路便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

原文详细地址：http://www.cnblogs.com/xiaohuochai/archive/2016/05/03/5454232.html

为您推荐