两列布局方式
Posted 飘然离去
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两列布局方式相关的知识，希望对你有一定的参考价值。
两列布局方式：
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>
以上是关于两列布局方式的主要内容，如果未能解决你的问题，请参考以下文章