实现一个左边固定宽度,布局实例系列
分类:高并发

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

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

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

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

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 最好清除浮动,避免浮动的影响
  1. 通过 BFC 规则实现

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

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

深入理解BFC和Margin Collapse 
CSS之BFC详解

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

图片 1

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


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

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

 

CSS 实现一个左边固定宽度、右边自适应的两列布局,css两列 最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现...

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

今天聊聊一个经典的布局实例:

Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是:

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

实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图:图片 3图片 4

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

可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现。不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局。

肯定有人心里犯嘀咕了,哈~这么简单,不就是全部左浮动嘛,这也好意思拿出来讲?别急啊,其实里面的坑还是挺多的,且待我一个个填上。

  1. 通过绝对定位实现

1. 首先,使用浮动布局来实现一下

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

  1. 左侧元素与右侧元素优先渲染,分别向左和向右浮动
  2. 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动插入到左右两列元素的中间,随后设置 margin 左右边距分别为左右两列的宽度,将中间元素调整到正确的位置。

这是一种比较便利的实现方式,无需额外的元素辅助定位,同时兼容性也比较优秀。但有一个缺点就是该布局方式只能实现左右两列宽度固定,中间自适应这一种三列布局,灵活性不强。

1. 通过左浮动实现

  1. 要实现这样一个布局,我们首先需要如下的 HTML:

    <div id="float-container">
             <div class="float-element"></div>
             <div class="float-element"></div>
             <div class="float-element"></div>
             <div class="float-element"></div>
             <div class="float-element"></div>
             <div class="float-element"></div>
             <div class="float-element"></div>
             <div class="float-element"></div>
             <div class="float-element"></div>
    </div>
    
  2. 然后开始写 CSS 吧,就像这样:

    #float-container {
        background-color: red;
    }
    .float-element {
        float: left;
        width: 50px;
        height: 30px;
        background-color: blue;
        margin: 10px;
    }
    

    使每个小容器向左浮动,再设定一个边距,一个根据浏览器宽度自适应变化位置的浮动布局就搞定收工了?当然不会,效果会像这样:图片 5

  3. 咦,说好的红色背景大容器呢,怎么躲起来啦?检查一番,原来是忘了给大容器 div 设定宽高度了,那就设定一下宽高度。既然要求了大容器自适应,那么我们就分别设定为 100% 吧:

    #float-container {
        background-color: red;
        height: 100%;
        width: 100%;
    }
    .float-element {
        float: left;
        width: 50px;
        height: 30px;
        background-color: blue;
        margin: 10px;
    }
    

    好啦,刷新一下。图片 6大容器咋还是没出来?

  4. 现在让我们分析一下吧,为何看不见大容器?因为 div 如果没有包裹元素的话,百分比宽高度是不会产生效果的。

    那么为什么大容器明明包裹着九个 div,百分比宽高度却没有产生效果呢?因为小容器都设定为左浮动,已经脱离文档流,大容器并没有包围小容器,表现出高度为0(高度塌陷)。接下来我们想要大容器自适应,又不想使小容器失去浮动的特性,能够随着宽度变化自动调整每一行的个数,应该怎么办?我们需要闭合浮动元素,使其包含框表现出正常的高度。是时候请出我们的 BFC 大神啦,对,我已经连续三篇实例博文提到 BFC 原理了,因为这个原理就是这么有用啊(该处原理的详细介绍请参考一丝大神的《那些年我们一起清除过的浮动》)。现在我们在大容器加上 overflow: hidden; 就可以自动清理其包含的任何浮动元素,接下来看看最终的 DEMO,试着调整一下宽度,是不是已经实现了想要的效果?

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

  5. 通过 inline-block 实现


只能通过左浮动完成这个实例?并不是,我们还有 inline-block。inline-block 可以像行内元素一样水平地依次排列,但框的内容仍然符合块级框的行为。通过这一特性,我们可以利用 inline-block 像浮动一样创建很多网格铺满容器,并且不需要清除浮动。当然整个布局过程也比左浮动简便了一些,如下面的 DEMO:

See the Pen inline-block-container by xal821792703 (@honoka) on CodePen.


 最后感谢大家的阅读,欢迎前往我的 repo 查看源代码整理,有任何问题也请尽情向我吐槽。

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

2. 其实,也可以试试利用 BFC

See the Pen bfc-three-columns by xal821792703 (@honoka) on CodePen.

昨天的《CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局》已经谈到了利用 BFC 原理实现多列布局的方法。BFC 元素不会与浮动元素叠加,自然也可以利用 BFC 原理完成这个实例。

  1. 同样的左右两列元素优先渲染,并分别左右浮动。
  2. 接下来将中间元素设置 overflow: hidden; 成为 BFC 元素块,不与两侧浮动元素叠加,则自然能够插入自己的位置啦。

 注意点如下:

3. 接下来就尝试一下大名鼎鼎的双飞翼布局吧

See the Pen grid-three-columns by xal821792703 (@honoka) on CodePen.

双飞翼是由淘宝玉伯等前端大牛提出的一种多列布局方法,主要利用了浮动、负边距、相对定位三个布局属性,使三列布局就像小鸟一样,拥有中间的身体和两侧的翅膀。

接下来就简单介绍一下双飞翼的实现过程:

  1. 假设我们现在需要一个如实例说明一样的三列布局,写出如下 div 结构:

    <div class="grid">
        <div id="div-middle-02">div-middle</div>
        <div id="div-left-02">div-left</div>
        <div id="div-right-02">div-right</div>
    </div>
    
  2. 首先我们将中间元素放在文档流最前面优先渲染,然后使其向左浮动,并设置 width 为 100%:

    #div-middle-02 {
        float: left;
        background-color: #fff9ca;
        width: 100%;
        height: 50px;
    }
    

    中间元素直接占满全列,形成小鸟的身体。图片 7

  3. 接下来我们开始为小鸟加上双翼,将左右两列元素均设为左浮动,然后通过调整负边距将其定位在各自的位置上:

    #div-middle-02 {
        float: left;
        background-color: #fff9ca;
        width: 100%;
        height: 50px;
    }
    #div-left-02 {
        float: left;
        background-color: red;
        width: 150px;
        margin-left: -100%;
        height: 50px;
    
    }
    
    #div-right-02 {
        float: left;
        background-color: yellow;
        width: 200px;
        margin-left: -200px;
        height: 50px;
    }
    

    看起来,双翼安装成功啦。图片 8

  4. 这样三列布局就大功告成了?No,no,no,仔细看看上面的效果图,可以发现 div-middle 的字块消失了。这是因为通过负边距调整浮动元素位置时,会产生层叠的效果,上面的布局其实只是左右两列元素分别定位在自己的位置上并覆盖中间元素的那部分而已,中间元素的定位并未成功。中间元素要怎样定位在自己的位置上呢?小鸟的身体不是还缺少骨架嘛,那么我们在小鸟体内加上骨架吧:

    <div id="div-middle-02">
            <div id="middle-wrap-02">div-middle</div>
    </div>
    

    在中间元素中再增加一层包裹,通过这层骨架我们就可以方便地控制小鸟身体的位置啦,方法就是调整骨架的左右边距,使其分别等于左右两列的宽度:

    #div-middle-02 {
        float: left;
        background-color: #fff9ca;
        width: 100%;
        height: 50px;
    }
    
    #middle-wrap-02 {
        margin: 0 200px 0 150px;
    }
    
    #div-left-02 {
        float: left;
        background-color: red;
        width: 150px;
        margin-left: -100%;
        height: 50px;
    
    }
    
    #div-right-02 {
        float: left;
        background-color: yellow;
        width: 200px;
        margin-left: -200px;
        height: 50px;
    }
    

    好啦,一个左右定宽,中间自适应的三列布局以双飞翼的方式成功完成。图片 9

  5. 总结整个过程,就是先放好身体,再加上翅膀,然后让身体包裹一层骨架,通过骨架将身体定位到正确的位置。这就是双飞翼布局的完全体吗?当然不是,接下来我们要请出大杀器相对布局啦,就像小鸟可以通过各种不同的姿势飞翔一般,通过 position: relative; 双飞翼可以实现任意的三列或双列布局。本实例加上相对定位,便成为了这样的完全体:

    #div-middle-02 {
        float: left;
        background-color: #fff9ca;
        width: 100%;
        height: 50px;
    }
    
    #middle-wrap-02 {
        margin: 0 200px 0 150px;
    }
    
    #div-left-02 {
        float: left;
        position: relative;
        background-color: red;
        width: 150px;
        margin-left: -100%;
        height: 50px;
    
    }
    
    #div-right-02 {
        float: left;
        position: relative;
        background-color: yellow;
        width: 200px;
        margin-left: -200px;
        height: 50px;
    }
    
  6. 双飞翼能够兼容到 IE6,其可以实现的各种布局在此便不作展开了,有兴趣可以参考玉伯分享的 DEMO

    • 需要套一个“positioned”的父元素
    • div-a 绝对定位,并将位置调整为浏览器左上角
    • div-b margin-left 属性值为 div-a 的宽度(因为 div-a 绝对定位已经脱离文档流,故不设定为 div-a 宽度的话,会相互覆盖)
    • div-c 绝对定位并将位置调整为正下方
    • 需要自适应的 div 均设定宽度为100% 

4. 跟上潮流,试试 flex

See the Pen flex-three-columns by xal821792703 (@honoka) on CodePen.

看完了强大的双飞翼布局,是不是已经心急火燎地想亲手试试啦。别急,客官,再听我唠唠 CSS3 的新布局 flex 呗。先让我说明一下上面的 DEMO 中是怎样实现本次实例的:

  1. 设计一个弹性容器包裹需定位的三个元素,然后将该弹性容器的排列属性设为水平排列(flex-flow: row)
  2. 现在三个元素已经是三列布局了,再将三列元素分别设定一下宽度就行了,左右元素设定为定宽,自适应的中间元素设定为 100%。

    .flex {
        display: flex;
        flex-flow: row;
    }
    
    #div-left-03 {
        background-color: red;
        width: 150px;
        height: 50px;
    }
    
    #div-middle-03 {
        background-color: #fff9ca;
        width: 100%;
        height: 50px;
    }
    
    #div-right-03 {
        background-color: yellow;
        width: 200px;
        height: 50px;
    }
    

    效果如下图:图片 10

  3. 搞定收工!大哥你瞪着我是怎么回事儿?~ 什么?效果不对?我的代码怎么可能不对?!~ 哎呦,别打我,我马上检查(哭)好吧,宽度不对,左右两侧的宽度均不符合设定的定值。什么情况呢?原来在 flex 布局中不能将被定位的元素宽度或高度设定为 100%,这样会影响其他定值大小的元素。那么该如何设置中间元素的宽度呢,flex: 1; 即可,可以试一下 DEMO 中去掉注释与不去掉的区别。

  4. 最后简单介绍一下 flex:flex 是 CSS3 的一种弹性容器布局,通过 flex,几行简单的 CSS 语句便可以实现各种布局(对!我就是 flex NC粉~被拍飞~)。那么 flex 有什么缺点呢?对,就是兼容性!图片 11
  5. 所以在使用 flex 的时候还请注意是否兼容当前浏览器,是否需要 -webkit- 标签。flex 的具体语法和各类实例因为篇(lan)幅(de)过(xie)多的原因,也不做过多介绍了,可以参考阮一峰老师的博文:

Flex 布局教程:语法篇

Flex 布局教程:实例篇


最后感谢大家的阅读,欢迎前往我的 repo 查看源代码整理,有任何问题也请尽情向我吐槽。

  2. 通过浮动实现

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

注意点如下:

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

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

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

深入理解BFC和Margin Collapse 

CSS之BFC详解

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

图片 12

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


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

 

本文由10bet手机官网发布于高并发,转载请注明出处:实现一个左边固定宽度,布局实例系列

上一篇:Python图像处理,聚类算法 下一篇:没有了
猜你喜欢
热门排行
精彩图文