css 實現左右布局

  <div class="test-layout">
        <p>左</p>
        <p>右</p>
  </div>

 

1. position定位

.test-layout {
        position: relative;
 }

p:last-child{
        position: absolute;
        right: '設定你要的距離' ;
        top: '設定你要的距離';
}

 

2. 使用-webkit-box彈性盒子布局，使用ie8+，Chrome，火狐，同時使用移動

.test-layout {
        position: -webkit-box;
        -webkit-box-orient: horizontal;
 }

p{
        -webkit-box-flex: 1;  // 可自定義寬度
}    

 

3. table布局

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

 

4. display:inline-block

p{
     display: inline-block;
 }

 

5. float

float+margin： 固定左邊，右邊拉開距離

p: first-child{
    float: left;
    width: 200px;
    height: 100%;
}
p: last-child{
    margin-left: 200px;
}

float+overflow: 固定左邊，利用overflow:hidden形成BFC，不會與float重疊

p: first-child{
    float: left;
    width: 200px;
    height: 100%;
}
p: last-child{
    overflow:hidden;
}

float+calc: 固定左邊，減掉左邊寬度

p: first-child{
    float: left;
    width: 200px;
    height: 100%;
}
p: last-child{
    width:calc(100%-200px);
}