CSS三栏布局实现，左右固定，中间自适应
2019-04-08 本文已影响0人
木子方是个小太阳
一：Float元素浮动实现三栏布局
实现方式：左右元素浮动，中间元素左右marign值撑开两边距离。
例：
.left,.right{
width:200px;
height:100px;
background: pink;
float: left;
}
.center{
background:red;
}
.right{
float: right;
}
<body>
<div class="left">left</div>
<div class="right">rigth</div>
<div class="center">今天天气好晴朗，处处好风光！今天天气好晴朗，处处好风光！今天天气好晴朗，处处好风光！</div>
</body>
此时看似没有问题，可是如果中间内容过多，超出左右两边高度，我们将看到文字环绕问题，如下如所示。
解决办法：
①：给中间元素，设置margin值，左右margin为左右浮动元素的宽度。
.left,.right{ width:200px; height:100px; background: pink; float: left; } .center{ background:red; margin-left:200px; margin-right:200px; } .right{ float: right; }
①：如果想要三栏高度保持一致，就给三栏元素设置相同高度;超出加垂直方向滚动条overflow-y:auto;
细心的同学可能发现，我们的DOM结构为左-右-中，而不是左中右，这是因为浏览器解决代码是从上往下执行，如果把.center放在中间，解析时因为它是个块元素，所以当解析.right元素时，它会脱离当前文档流从下一行开始，这时候就出现了最右侧DOM下沉现象。
此方法缺点：DOM结构改变了加载顺序，右边DOM优于中间DOM加载。
Position定位实现三栏布局
父元素相对定位，子元素绝对定位
.wrap{
position: relative;
}
.left{
position: absolute;
top:0;
left: 0;
width: 200px;
height: 100px;
background:pink;
}
.right{
position: absolute;
top:0;
right: 0;
width: 200px;
height: 100px;
background:pink;
}
.center{
margin:0 200px;
background:red;
}
<div class="wrap">
<div class="left">left</div>
<div class="center">今天天气好晴朗，处处好风光！</div>
<div class="right">rigth</div>
</div>
补充flex左右布局，左边固定，右边自适应，并且两列等高自适应
.main{
width: 200px;
display: flex;
}
.title{
width: 80px;
}
.content{
flex:1;
}
<div class="main">
<div class="title">我是标题</div>
<div class="content">我说内容我说内容我说内容我说内容我说内容</div>
</div>
