标签：fixed css relative ie6 ati abs play div content
两列布局方式：
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>
标签：fixed css relative ie6 ati abs play div content
原文地址：http://www.cnblogs.com/coding4/p/6240910.html
