4、IFE任务三——左右定宽,中间一栏根据父元素宽度填充满

0、题目

  • 使用 HTML 与 CSS 按照如下示例图, 实现三栏式布局。
  • 左右两栏宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高

1、解题方式:

    还有一个要求是“中间一栏长度改变时,父元素的高度始终为子元素中最高的高度”,这个请看如何解决高度坍塌问题——BFC模式,先来分析布局。

    看到这个任务,首先想到的就是双飞翼布局,之后有看其他人的代码,总结了一下:

  一、position方式:

    左、中、右顺序可以任意调整。左右设置绝对定位脱离文档流,再通过left、right、top 等属性进行定位,中间嵌套一个div,设置左右外边距分别为左右部分的宽度,使得中间部分的内容不会被左右遮盖。

<style>
        *{
            margin:0;
            padding:0;
        }
        .left,.right{
            position:absolute;        /*左右绝对定位、定高宽*/
            height:200px;
            width:200px;
        }
        .left{
            background-color: red;
            left:0;
        }
        .center{
            min-height:200px;
            background-color: yellow;
        }
        .content{
            margin:0 200px;           /*避免中间内容被遮盖*/
        }
        .right{
            right:0;
            top:0;
            background-color: blue;
        }
</style>
<body>
<div class="container">
<div class="left"></div> <div class="center"> <div class="content"></div> </div> <div class="right"></div>
</div>
</body>

  二、float方式:

    左、右分别浮动到左右,中间部分设置相应的左右外边距;

    建议按照左、右、中顺序,因为只有左右设置的是浮动,如果把中放在右前面,就会先渲染中间部分,由于中间盒子div会占满一行,就会导致浮动元素的位置不够,右边的盒子就会被挤到下一行;

           也可以按照左、中、右的顺序,可以把左中外面再套一层div,设置float:leftwidth:100%;margin-right:-200px;(右边盒子的宽度),这样右边的盒子不会被挤下去,而且可以先渲染中间的内容,具体情况再选择吧。

<style>
        *{
            margin:0;
            padding:0;
        }
        .left,.right{
            height:200px;
            width:200px;
        }
        .left{
            background-color: red;
            float:left;
        }
        .center{
            min-height:200px;
            margin:0 200px;
            background-color: yellow;
        }
        .right{
            float:right;
            background-color: blue;
        }
</style>
<body>
<div class="container">
<div class="left"></div> <div class="right"></div> <div class="center"></div>
</div> </body>

  三、负外边距方式:

   (1)双飞翼布局:

    按照中、左、右的顺序,三部分都左浮动,中间的宽度为100%,左右分别设置相应的负外边距(左:margin-left:-100%;右:margin-left:-200px;),中间嵌套一个div,设置左右外边距避免内容被遮盖。

   (2)圣杯布局:

    和双飞翼在布局上大致相同,都是左浮动、中间宽度为100%,左右设置相应负外边距,但由于中间的内容会被左、右两部分覆盖,所以两种布局的不同点在于解决这个问题的方法不同。

           圣杯布局先为中间部分设置内边距,左、右内边距分别为左右盒子的宽度,把内容拉回到中间最终需要自适应的部分,由于设置的是内边距,左右两部分也会跟着过来,再通过相对定位使左边盒子相对向左偏移,使右边盒子相对向右偏移,这样左右两部分就不会遮挡住中间的内容了。

   (3)其他布局:

    上面两种都是按照中、左、右的顺序,其实左、中、右或者左、右、中顺序都可以,只要中间宽度为100%,再设置浮动以及相应的负外边距。

    注意:中间部分内容遮盖问题以及左右盒子有可能会被中间遮盖,只要设置被遮住部分的position:relative和z-index:999,让它保持在最前即可。

    如何选择布局方式?主要内容放在前面先渲染。

原文地址:https://www.cnblogs.com/cjlalala/p/5547572.html