方法一：自身浮动法。左栏左浮动，右栏右浮动。
<!-- middle放在最后 -->
<style type='text/css'>
* {
margin:0;
padding: 0;
}
.left , .right{
height: 300px;
width: 200px;
}
.right{
float: right;
background-color: red;
}
.left{
float: left;
background-color: #080808;
}
.middle{
height: 300px;
margin: 0 200px;//没有这行，当宽度缩小到一定程度的时候，中间的内容可能换行
background-color: blue;
}
</style>
方法二：margin负值法
<!-- middle放在开头 -->
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.left , .right{
height: 300px;
width: 200px;
float: left;
}
.right{
margin-left: -200px;
background-color: red;
}
.left{
margin-left: -100%;
background-color: #080808;
}
.middle{
height: 300px;
width: 100%;
float: left;
background-color: blue;
}
</style>
<!--放第一行-->
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
方法三：绝对定位法。左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。
<style>
body{
margin: 0;
padding: 0;
}
.left , .right{
top: 0;
height: 300px;
width: 200px;
position: absolute;
}
.right{
right: 0;
background-color: red;
}
.left{
left: 0;
background-color: #080808;
}
.middle{
margin: 0 200px;
height: 300px;
background-color: blue;
}
</style>
<div class="left">left</div>
<!--这种方法没有严格限定中间这栏放置何处-->
<div class="middle">middle</div>
<div class="right">right</div>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
