面试CSS-两侧固定宽度，中间自适应的三列布局

最新推荐文章于 2022-05-16 16:51:13 发布

Auroraone

最新推荐文章于 2022-05-16 16:51:13 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/Auroraone/article/details/82955130

版权

1. 圣杯布局（圣杯布局的的原理是利用margin的负值的特性来实现的。）
   注：布局中间部分一定要放在前面，左右顺序不限制。对于left块的margin负值一定要等于wrap的宽度。
   主要步骤如下：
   在center块外层添加一个div，并设置左浮，以及宽度（这个宽度要与left块的margin-left相匹配），
   center块设置左右的margin，margin-left要与left块的宽度相等，margin-right要与right块的宽度相等。
   left块设置左浮，并且其margin-left设置成负值，这个负值与center块外层的div的宽度相等，这样，left块就移动到center的左侧了。
   right块设置左浮，并且其margin-left设置成负值，这个负值与自身宽度相等，这样，right块就移动到center的右侧了。*/

<style>
   #wrap {
   width: 100%;
   height: 100px;
   background-color: gray;
   float: left;
}
 #center {
    margin: 0 200px;/*关键步骤：在#center的左右两侧空出#left_margin和#right_margin的宽度来*/
    height: 100px;
    background-color: red;
    }
    #left_margin{
        float: left;
        width: 200px;
        height: 100px;
        background-color: blue;
        margin-left: -100%; /*关键步骤：能够让#left_margin块从第二行移动到左侧*/
    }
    #right_margin {
        float: left;
        width: 200px;
        height: 100px;
        background-color: yellow;
        margin-left: -200px; /*关键步骤：能够让#right_margin块从第二行移动到右侧*/
    }
</style>

<body>
<div id="wrap">
    <div id="center">center</div>
</div>
<div id="left_margin">left</div>
<div id="right_margin">right</div>
</body>

效果图如下：

1.设置 conter

margin: 0 200px; /*关键步骤：在#center的左右两侧空出#left_margin和#right_margin的宽度来*/

2.设置left,right
margin-left: -100%; /*关键步骤：能够让#left_margin块从第二行移动到左侧*/
margin-left: -200px; /*关键步骤：能够让#right_margin块从第二行移动到右侧*/

2.flex布局

在外围包裹一层div，设置为display：flex；
center块设置flex：1，不设置宽度，
left和right块设置固定的宽度。

<style>
        /*flex布局
        在外围包裹一层div，设置为display：flex；
        center块设置flex：1，不设置宽度，
        left和right块设置固定的宽度。*/
        .wrap {
            display: flex;
            width: 100%;
            height: 100px;
        }
        .left,.right {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        .center {
            flex: 1;
            height: 100px;
            background-color: red;
        }
    </style>

<body>
<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>

3.绝对定位的方法

这种方法，其实原理很简单。
就是将左右两侧使用绝对定位，这样二者脱离了文档流，
中间的部分则设置margin就好了。

<style>
        /*绝对定位的方法
       这种方法，其实原理很简单。
       就是将左右两侧使用绝对定位，这样二者脱离了文档流，
       中间的部分则设置margin就好了。*/
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width: 100%;
            height: 100px;
            position: relative;
        }
        .left {
            width: 200px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: blue;
        }
        .right {
            width: 200px;
            height: 100px;
            position: absolute;
            right: 0;
            top: 0;
            background-color: blue;
        }
        .center {
            height: 100px;
            background-color: red;
            margin: 0 200px;
        }
    </style>

<body>
<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>

4.浮动的方法

浮动法的原理其实跟绝对定位相似的，就是使用对左右使用分别使用float:left和float:right，从而使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。需要注意的是：center块要写在左右两侧的后面，不然，不在一行。

<style>
        /*浮动的方法
       浮动法的原理其实跟绝对定位相似的，就是使用对左右使用分别使用float:left和float:right，
       从而使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。
      需要注意的是：center块要写在左右两侧的后面，不然，不在一行。 */
        .left {
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        .right {
            float: right;
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .center {
            margin: 0 200px;
            height: 100px;
            background-color: red;
        }
    </style>

<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>

Auroraone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫