星空网 > 软件开发 > 网页设计

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

最近在百度 IFE 训练营中看见的一道题目:

用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

个人总结出如下三种实现思路:

  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. 通过浮动实现

See the Pen float-two-column by xal821792703 (@honoka) on CodePen.

注意点如下:

    • div-a 设定为左浮动
    • div-b 与上面一样需要将 margin-left 属性值设为 div-a 的宽度,原因同上,浮动也会脱离文档流
    • div-c 最好清除浮动,避免浮动的影响

3. 通过 BFC 规则实现

See the Pen bfc-two-column by xal821792703 (@honoka) on CodePen.

此处便不花大量篇幅介绍 BFC 了,可以参见下面两篇博文:

深入理解BFC和Margin Collapse 

CSS之BFC详解

简而言之,BFC 可以帮助我们解决布局中左边元素脱离文档流后,右边元素的左外边距会触碰到包含块容器的左外边框的问题,就像下图:

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

现在我们仅需注意将 div-b 设定为 BFC 元素即可。


以上便是个人总结出的三种两列布局方法,源代码已同步至个人 repo,欢迎参考交流(笑)

 




原标题:CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

instagram用户推荐:https://www.goluckyvip.com/tag/21530.html
Instagram运营:https://www.goluckyvip.com/tag/21531.html
instagram找人:https://www.goluckyvip.com/tag/21532.html
instagram主页:https://www.goluckyvip.com/tag/21533.html
Instant Data Scraper:https://www.goluckyvip.com/tag/21534.html
Instant Shipping:https://www.goluckyvip.com/tag/21535.html
2022世界杯门票如何买?:https://www.vstour.cn/a/363182.html
沈阳到本溪的距离有多远?(详细路线及交通方式):https://www.vstour.cn/a/363183.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流