多列布局

Posted 2022-08-01 x-yy

 

上例的图，就是左右布局

1.定宽 + 自适应

1.1、float + margin

<div class="parent">
   <div class="left">
    <p>left</p>
   </div>
   <div class="right">
    <p>riht</p>
    <p>right</p>
   </div>
</div>

p
    background: #666;   
   
   .right p
    background: #999;
   
   .left
    float: left;
    width: 100px;
   
   .right
    margin-left: 100px;
   
  

1.2、float + overflow:hiden

p
    background: #666;   
   
   .right p
    background: #999;
   
   .left
    float: left;
    width: 100px;
   

 .right
    overflow: hidden;
    /*bfc原理*/
   

1.3、table

相同结构，用table 去模拟

.parent
    display: table;
    width: 500px;
    /*table-layout: fixed;*/ 
   
   .left
    /*width: 100px;*/
   
   .left, .right
    display: table-cell;
   

1.4、flex

.parent
    display: flex;
   
   .left
    width: 100px;
    
   
   .left, .right
    flex: 1;
   

2.两列定宽

 

<div class="parent">
   <div class="left">
    <p>left</p>
   </div>
   <div class="center"><p>center</p></div>
   <div class="right">
    <p>riht</p>
    <p>right</p>
   </div>
</div>

p
    background: #666;   
   
   .right p
    background: #999;
   
   .left,.center
    float:left;
    width:100px;
    margin-right: 20px;
   
   .right
    overflow: hidden;
   

3.不定宽 + 自适应

 

4.不定宽 + 不定宽 + 自适应

（同理）

5.等宽

多列等宽，一般这么写

但是如果要给外边距呢。。。。。。。。

 

5.2、table

<div class="parent-fix">
   <div class="parent">
    <div class="colum">
     <p>1</p>
    </div>
    <div class="colum">
     <p>2</p>
    </div>
    <div class="colum">
     <p>3</p>
    </div>
    <div class="colum">
     <p>4</p>
    </div> 
   </div>
  </div>

   .parent-fix
    margin-left:-20px ;
   
   .parent
    display: table;
    width: 100%;
   
   .colum
    display: table-cell;
    padding-left: 20px;
   

5.3 flex

 

6.等高布局