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);
}