【CSS面试】两栏布局和三列布局

纵有千堆雪与长街

已于 2022-08-29 11:32:19 修改

阅读量551

点赞数

分类专栏： css面试题文章标签： css javascript css3

于 2022-08-25 23:50:13 首次发布

本文链接：https://blog.csdn.net/qq_40992225/article/details/126534110

版权

css面试题专栏收录该内容

21 篇文章 2 订阅

订阅专栏

一、两栏布局

左列定宽，右列自适应

1. 利用浮动+margin

    <style>
        .left {
            width: 300px;
            height: 400px;
            background-color: yellow;
            float: left;
        }
        
        .right {
            height: 400px;
            background-color: blue;
            margin-left: 300px;
        }
    </style>
</head>

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

结果如下：
在这里插入图片描述
看着好像是得行，但是实际上这个right盒子是100%，也就是right被覆盖在left之下，所以我们还需要为right设置一个margin-left
最终的效果：

2. 利用浮动+BFC

    <style>
      .left {
            width: 300px;
            height: 400px;
            background-color: yellow;
            float: left;
        }
        
        .right {
            height: 400px;
            background-color: blue;
            /* 触发BFC */
            overflow: hidden;
        }
    </style>
</head>

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

结果如上。
3. 利用定位

左盒子绝对定位，右盒子用 margin-left:300px

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            position: relative;
        }

        .left {
            position: absolute;
            width: 300px;
            left: 0;
            height: 400px;
            background-color: yellow;
        }
        
        .right {
            height: 400px;
            background-color: blue;
            margin-left:300px
        }
    </style>
</head>

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

或者给左，右盒子都用绝对定位。

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            position: relative;
        }

        .left {
            position: absolute;
            width: 300px;
            left: 0;
            height: 400px;
            background-color: yellow;
        }
        
        .right {
            position: absolute;
            left:300px;
            right:0;
            height: 400px;
            background-color: blue;
        }
    </style>

4. 利用flex布局

    .container {
            display: flex;
        }
        
        .left {
            width: 300px;
            height: 400px;
            background-color: yellow;
        }
        
        .right {
            flex: 1;
            height: 400px;
            background-color: blue;
        }

flex: 1可以让其填充剩余的空间，以达到拉伸的效果

5. 利用浮动+负外边距

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right">
            <div class="content"></div>
        </div>
    </div>
</body>

 .left {
            width: 300px;
            float: left;
            height: 400px;
            background-color: yellow;
        }
        
        .right {
            width: 100%;
            float: left;
            height: 400px;
            background-color: red;
        }

此时
在这里插入图片描述
由于宽度太大，right将会被挤下来。我们目的是让他们处于相同的行，所以此时在left上加上一个margin-right:-100%，这样right将会覆盖left，并且完全占据第一行。

  .content {
            height: 400px;
            background-color: blue;
        }

我们再为content设置一个背景颜色和高度，因为content是right的子元素，它会占据right的整个空间，所以结果全部变成蓝色
在这里插入图片描述
此时我们再为content加一个margin-left：300px；属性

    .content {
            height: 400px;
            background-color: blue;
            margin-left: 300px;
        }

在这里插入图片描述
然后再去除right的红色背景就实现我们想要的效果了。

6. table布局

 <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>

       .container {
            width: 100%;
            display: table;
        }
        
        .left {
            display: table-cell;
            height: 400px;
            background-color: yellow;
        }
        
        .right {
            display: table-cell;
            height: 400px;
            background-color: blue;
        }

此时再给left一个300px的宽度就能达到效果。

二、三栏布局

左右定宽，中间自适应

1. 浮动+margin

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

.left {
  float: left;
  width: 200px;
  background-color: red;
}
.right {
  width: 200px;
  background-color: blue;
  float: right;
}
.main {
  margin-left: 200px;
  margin-right: 200px;
  background-color: green;
}

效果如下：
在这里插入图片描述
2. 浮动+BFC

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

.left {
  float: left;
  width: 200px;
  background-color: red;
}
.right {
  width: 200px;
  background-color: blue;
  float: right;
}
.main {
  overflow: hidden;
  background-color: green;
}

3. flex

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

.container {
  display: flex;
}
.main {
  flex: 1;
  background-color: red;
}
.left {
  width: 200px;
  background-color: blue;
}
.right {
  width: 200px;
  background-color: green;
}

4. table布局

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

.container {
  display: table;
}
.left {
  width: 200px;
  display: table-cell;
  background-color: red;
}
.main {
  display: table-cell;
  background-color: blue;
}
.right {
  display: table-cell;
  width: 200px;
  background-color: green;
}

5. 定位

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

.container {
  position: relative;
}
.main {
  margin: 0 200px;
  background-color: green;
}
.left {
  position: absolute;
  width: 200px;
  left: 0;
  top: 0;
  background-color: red;
}
.right {
  position: absolute;
  width: 200px;
  background-color: blue;
  right: 0;
  top: 0;
}

6. 圣杯布局

<div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

.container {
  margin-left: 200px;
  margin-right: 200px;
}
.main {
  float: left;
  width: 100%;
  background-color: red;
}
.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  position: relative;
  right: -200px;
  background-color: green;
}

圣杯布局是以main这个div为主的，

.main {
  float: left;
  width:100px;
  background-color: red;
}
.left {
  float: left;
  width: 200px;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  background-color: green;
}

在这里插入图片描述
但是这并不是我们想要的结果，我们想要main在中间，而left和right分别在main的左侧和右侧，那该怎么办呢？分别在container中分别设置左和右的margin值

.container {
  margin-left: 200px;
  margin-right: 200px;
}

在这里插入图片描述
接着我们将main的宽度改为100%，left和right就由于没有宽度而被挤下来了，如下图：

.main {
  float: left;
  width: 100%;
  background-color: red;
}

在这里插入图片描述
接着我们将left的margin-left设为-100%，再给right的margin-left设为-200px;

.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: green;
}

在这里插入图片描述
接着我们要解决的就是，怎样可以使left和right不覆盖中间的元素，于是我们可以用相对定位，并且把他们的left和right设置为-200px

.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  position: relative;
  right: -200px;
  background-color: green;
}

在这里插入图片描述
7. 双飞翼布局

<body>
  <div class="content">
    <div class="main"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</body>

.content {
  float: left;
  width: 100%;
}
.main {
  margin-left: 200px;
  margin-right: 200px;
  background-color: red;
}
.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  background-color: blue;
}
.right {
  width: 200px;
  float: right;
  margin-left: -200px;
  background-color: green;
}

效果也如上。


  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>

.main {
  float: left;
  width:100%;
  background-color: red;
}
.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  background-color: blue;
}
.right {
  width: 200px;
  float: left;
  margin-left: -200px;
  background-color: green;
}

刚开始如下：
在这里插入图片描述
由于我们没有container容器，所以左右两边的margin值是没有的，我们可以在main外面包裹一层div，他的类定义为content，把浮动加到main中，把宽度100%加到父元素中，再设置margin-left和margin-right的值

.content {
  float: left;
  width: 100%;
}
.main {
  margin-left: 200px;
  margin-right: 200px;
  background-color: green;
}
.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 200px;
  float: right;
  margin-left: -200px;
  background-color: blue;
}

纵有千堆雪与长街

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS面试】两栏布局和三列布局

结果如下：看着好像是得行，但是实际上这个right盒子是100%，也就是right被覆盖在left之下，所以我们还需要为right设置一个margin-left结果如上。左盒子绝对定位，右盒子用 margin-left:300px或者给左，右盒子都用绝对定位。flex: 1可以让其填充剩余的空间，以达到拉伸的效果此时由于宽度太大，right将会被挤下来。......
复制链接

扫一扫