CSS布局——两栏布局和三栏布局

最新推荐文章于 2024-09-30 08:45:00 发布

Hoshizola

最新推荐文章于 2024-09-30 08:45:00 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/Hoshizola/article/details/117374816

版权

本文详细介绍了CSS布局中的两栏和三栏布局方法，包括float+margin、BFC、定位、flex以及经典布局方案如圣杯布局和双飞翼布局。通过各种示例代码展示了如何实现左边宽度固定，右边宽度自适应的两栏布局，以及左右两栏固定，中间栏自适应的三栏布局。

摘要由CSDN通过智能技术生成

在网站中，两栏布局和三栏布局是常见的网页布局方式，这篇文章将总结常见的两栏布局和三栏布局方案都有哪些。

一、两栏布局

以下的两栏布局方式属于左边宽度固定，右边宽度自适应的情形。
方案一：float+margin
1、首先准备一个块级父元素，父元素中有两个子元素，分别作为左右两栏；
2、将左元素设置浮动，这时左元素脱离文档流，右元素位置上移；
3、为防止右元素被左元素挡住，需要给右元素加外边距。
这是最简单的一种布局方案。
html结构：

<div class="box">
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>

css样式：

.left{
   
  float: left;
  width: 150px;
  height: 200px;
  background-color: teal;
}
.right{
   
  margin-left: 160px;
  background-color: tomato;
  height: 200px;
}

效果：
在这里插入图片描述 方案二：float+BFC
1、首先准备一个块级父元素，父元素中有两个子元素，分别作为左右两栏；
2、将左元素设置浮动，这时左元素脱离文档流，右元素位置上移；
3、为防止右元素被左元素挡住，需要给右元素外加一个父元素，并触发该父容器的BFC。
代码如下：
html结构：

<div class="box">
  <div class="left">左边</div>
  <div class="container">
    <div class="right">右边</div>
  </div>
</div>

css样式：

.left{
   
  width: 150px;
  height: 200px;
  background-color:wheat;
  float: left;
}
.container{
   
  /* 触发BFC，防止右边的块元素被左边的挡到 */
  overflow: hidden;
}
.right{
   
  height: 300px;
  background-color: violet;
}