两列布局方式

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>

以上是关于两列布局方式的主要内容,如果未能解决你的问题,请参考以下文章

css 两列布局的多种实现方式及原理。

两列自适应布局及三列自适应布局

两列自适应布局

两列自适应布局

横向两列布局

基于浮动的布局