如何通过 CSS 实现一个左边固定宽度 右边自适应的两列布局

2025-03-04 06:33:16
推荐回答(2个)
回答1:

通过绝对定位实现
See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen.
注意点如下:
需要套一个“positioned”的父元素 div-a 绝对定位,并将位置调整为浏览器左上角 div-b margin-left 属性值为 div-a 的宽度(因为 div-a 绝对定位已经脱离文档流,故不设定为 div-a 宽度的话,会相互覆盖) div-c 绝对定位并将位置调整为正下方 需要自适应的 div 均设定宽度为100%

回答2:

第一种方法,网上流传比较广的方法。采用左列left浮动,右列不浮动,采用margin-left定位的方式。 #left{width:100px;height:100px;background-color:#ccc;border:2px solid #333;float:left;}#right{height:300px;margin-left:104px; border:2p...