CSS常见两列布局、三列布局⼀、两列布局：
　⽅法⼀：采⽤position：absollute；并设置margin-left的值。
#left{
position:absolute;
width:300px;
top:0px;
left:0px;
background:#F00;
}
#right{
background:#0FC;
margin-left:300px;
}
<div id="left">左边定宽</div> <div id="right">右边⾃适应</div>
⽅法⼆：采⽤float；并设置overflow:auto;(隐藏溢出的内容)　
#left {
float: left;
width: 300px;
background-color: blue;
}
#right {
overflow: auto;
background-color: red;
}
<div id="left">左边⾃适应</div>
<div id="right">右边定宽</div>
⽅法三：使⽤flex布局的写法
.content{
display:flex;
}
.aside.left{
border:5px solid black;
width:200px;
}
.aside.main{
flex-grow:1;
border:5px solid red;
}
.aside {
height:600px;
}
<div class="content">
<div class="aside left"></div>
<div class="aside main"></div>
</div>
⼆、三列布局
css实现三列布局⽅法⼀：与两列布局类似，左右两边设置position：absolute；和top:0;left:0;right:0;
中间设置margin-left和margin-right即可.
*{
padding:0px;
margin:0px;
}
#left,#right{
position:absolute;
width: 300px;
top:0;
background-color: #0FC;
}
#left{
left:0;
}
#right{
right:0;
}
#main{
margin:0 300px;
background-color:#999;
}
<div id="left">左边定宽</div>
<div id="main">中间⾃适应</div>
<div id="right">右边定宽</div>
⽅法⼆：左右采⽤float，中间设置 overflow:auto；和margin:0 300px; *{
padding:0px;
margin:0px;
}
#left,#right{
float:left;
width: 300px;
background-color: #0FC;
}
#right{
overflow:auto;
float:right;
}
#main{
margin:0 300px;
background-color:#999;
}
<div id="left">左边定宽</div>
<div id="right">右边定宽</div>
<div id="main">中间⾃适应</div>
⽅法三：使⽤flex布局的写法
.content{
display:flex;
}
.aside.left{
order:1;
border:5px solid black;
width:200px;
}
.aside.left{
order:3;
border:5px solid black;
width:200px;
}
.aside.main{
order:2;
flex-grow:1;
border:5px solid red;
}
.
aside {
height:600px;
}
<div class="content">
<div class="aside left"></div>
<div class="aside right"></div>
<div class="aside main"></div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。