两列布局方式

两列布局方式：(使用float之后，一定要给div指定宽度。)

1、float IE6 有3px偏移 在left上加 margin-left: -100px
.left{
background-color: red;
float: left;
width: 100px

}
.right{
background-color: green;
margin-left: 110px

}

<div class="content">
<div class="left">left</div>
<div class="right">
<p class="e">qqq</p>
<p>2w</p>
</div>
</div>

2、float+margin+fix用float：left 和right
<div class="content">
<div class="left">left</div>
<div class="right-flx">
<div class="right">
<p class="e">qqq</p>
<p>2w</p>
</div>
</div>
</div>

.left{
background-color: red;
float: left;
width: 100px;
position: relative;

}
.right{
background-color: green;
margin-left: 100px

}
.right-fix{
background-color: blue;
float: right;
width:100%;
margin-left: 100px

}

3、overflow

.left{
background-color: red;
float: left;
width: 100px;

}
.right{
background-color: green;
overflow: hidden;

}
<div class="content">
<div class="left">left</div>
<div class="right">
<p class="e">qqq</p>
<p>2w</p>
</div>
</div>

4、table
.content{
display: table;
width: 100%;
table-layout: fixed;

}
.left,.right{
display: table-cell;
}
.left{
background-color: red;
width: 100px;
}
.right{
background-color: green;
}

<div class="content">
<div class="left">left</div>
<div class="right">
<p class="e">qqq</p>
<p>2w</p>
</div>
</div>

5、flex css3
.content{
display: flex;

}

.left{
background-color: red;
width: 100px;
margin-right: 20px;
}
.right{
background-color: green;
flex:1;
}
<div class="content">
<div class="left">left</div>
<div class="right">
<p class="e">qqq</p>
<p>2w</p>
</div>
</div>

6 display +position
.content{
position: relative;

}

.left{
background-color: red;
width: 100px;
display: inline-block;
}
.right{
background-color: green;
position: absolute;
left: 110px;
width: 100%;
top:0;
}
<div class="content">
<div class="left">left</div>
<div class="right">
<p class="e">qqq</p>
<p>2w</p>
</div>
</div>