> 웹 프론트엔드 > HTML 튜토리얼 > 如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:28:36
원래의
1296명이 탐색했습니다.

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

用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 

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

  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 可以帮助我们解决布局中左边元素脱离文档流后,右边元素的左外边距会触碰到包含块容器的左外边框的问题,就像下图:

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

    以上便是个人总结出的三种两列布局方法,欢迎交流。

    另外如果对百度 IFE 前端训练营感兴趣,欢迎来我的 repo 看看(笑)

     

    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿