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

Posted 2023-03-21

通过绝对定位实现
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% 参考技术A 第一种方法，网上流传比较广的方法。采用左列left浮动，右列不浮动，采用margin-left定位的方式。 #leftwidth:100px;height:100px;background-color:#ccc;border:2px solid #333;float:left;#rightheight:300px;margin-left:104px; border:2p...本回答被提问者采纳