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

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

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

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

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值