佈局那點事

hll的小魚發表於2018-11-20

1.兩列左側固定寬度，右側自適應

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

1.float+margin

  
.left {
   float:left;
   width:100px;
   height:100%;
}
.right {
   height:100%;
   margin-left:100px;
}

2.float+overflow

.left {
   float:left;
   width:100px;
   background:red;
}
.right {
   overflow:hidden;
   background:yellow;
}

3.flex

.parent{
   display: flex;       
}
.left{
   background: red;
   width: 100px;
}
.right{
   background: yellow;
   flex-grow: 1;
}

2.三列左右固定，中間自適應

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

1.流式

.left{
   float:left;
   background:red;
   width:100px;
   height:100px;
   } 
.right{
   float:right;
   background:black;
   width:100px;
   height:100px;
   }
.center{
   background: yellow;
   margin-left:100px;
   margin-right: 100px;
   height:100px;
   }

2.BFC

.center{
background: yellow;
height:100px;
overflow: hidden;
}

3.Flex

.container{
   width: 100%;
   height:100px;
   display: flex;
}
.left{
 background:red;
 width:100px;
}
.right{
  background:black;
  width:100px;
  order:2;
}
.center{
  background:yellow;
  flex-grow:1;
  order:1;
}

4.absolute


.container{
  width: 100%;
  position: relative;
}
.left{
   background:red;
   width:100px;
   height:100px;
   position:absolute;
   left:0;
   top:0;
}
.right{
    background:black;
    width:100px;
    height:100px;
    position:absolute;
    right:0;
    top:0;
}
.center{
    background:yellow;
    margin:0 100px;
    height:100px;
}

相關文章