css设置两个div,一个左侧宽度固定,第二个宽度自适应

本文介绍了实现网页中左右布局的三种常见方法:使用浮动、通过cacl计算宽度以及利用flex布局特性。每种方法都提供了简洁的代码示例。

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

三种方法:1、浮动  2、cacl计算  3、flex布局。

<div class="container">

        <div class="left">左边</div><div class="right">右边</div>

</div>

① 浮动

<style>

.left {float: left; width: 200px;} .right {margin-left: 200px;}

</style>

 

cacl

<style>

.left {float: left; width: 200px;} .right {width: cacl(100% - 200px);float: right}

</style>

 

flex

<style>

.container {display: flex;} .left {flex: 0 0 200px;} .right {flex: 1;}

</style>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值