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

Posted 2020-07-18 cjlalala

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了任务三——左右定宽，中间一栏根据父元素宽度填充满相关的知识，希望对你有一定的参考价值。

　　　　还有一个要求是“中间一栏长度改变时，父元素的高度始终为子元素中最高的高度”，这个之后总结，先分析布局。

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

　　　　一、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="left"></div>
    <div class="center">
       <div class="content"></div>
    </div>
    <div class="right"></div>
</body>

　　　　二、float方式：

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

　　　　　　建议按照左、右、中顺序，因为只有左右设置的是浮动，如果把中放在右前面，就会先渲染中间部分，由于中间盒子div会占满一行，就会

　　　　导致浮动元素的位置不够，右边的盒子就会被挤到下一行；也可以按照左、中、右的顺序，可以把左中外面再套一层div，设置float:left；

　　　　width：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="left"></div>
    <div class="right"></div>
    <div class="center"></div> 
</body>