三栏布局-左右定宽，中间自适应

最新推荐文章于 2020-09-20 11:53:54 发布

原创最新推荐文章于 2020-09-20 11:53:54 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了三种实现三栏布局的方法：flex弹性盒子布局，利用float和margin的布局方式，以及绝对定位布局。每种方法都有其特点，适用于不同的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三栏布局-左右定宽，中间自适应

flex弹性盒子
float+margin布局
绝对定位布局

flex弹性盒子

思想：容器内的项目自动调整
只需在左右的俩个项目中调整flex-basis设置固定宽度即可

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}		
    .con {
        width: 100%;
        height:100%;
        background: red;
        display: flex;
        display: -webkit-flex;
        /* flex-direction: row;
        justify-content: center;
        align-items: center; */
        }
       .left,.right{
        flex:0 1 300px;//属性flex-grow,flex-shrink,flex-basis简写
        height: 100px;
        background: green;
       }
       .middle{
        flex-grow: 1;
        height: 100px;
        background: black;
       }
</style>
<body>
    <div class="con">
        <div class="left">1</div> 
        <div class="middle">2</div> 
        <div class="right">3</div>
    </div>
</body>

float+margin布局

思想：左右盒子均float，左边左浮动，右边右浮动。中间文档流使用margin将其称出来。
出现问题：右边的那栏另起一行居右
解决：将中间那栏放在最后面

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
		
        .left{
        float:left;
        height: 100px;
        width: 300px;
        background: yellow;
        } 
       .right{
        float:right;
        height: 100px;
        width: 300px;
        background: green;
       }
       .middle{
       	margin: 0 300px;
        height: 100px;
        background: black;
       }
</style>
<body>
    <div class="con">
        <div class="left">1</div> 
     //注意顺序    
        <div class="right">3</div>
        <div class="middle">2</div>
    </div>
</body>

绝对定位布局

思想：左中右均绝对定位，外包盒子相对定位
中间盒子左右各距离左右的宽度

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.con{position: relative;}
	.left,.right,.middle{
		position: absolute;
	}
		
        .left{
        left:0;
        height: 100px;
        width: 300px;
        background: yellow;
        } 
       .right{
        right:0;
        height: 100px;
        width: 300px;
        background: green;
       }
       .middle{
       	left:300px;
       	right:300px;
        height: 100px;
        background: black;
       }
</style>
<body>
    <div class="con">
        <div class="left">1</div> 
         <div class="middle">2</div>
        <div class="right">3</div>       
    </div>
 </body>