CSS实现两栏布局和三栏布局

原创 已于 2025-03-24 18:12:09 修改 · 956 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

于 2025-03-24 01:23:10 首次发布

CSS实现两栏布局和三栏布局

1.两栏布局

1.1 什么是两栏布局

在这里插入图片描述
如上界面分左右两列，左侧定宽，右侧占剩余的宽。这就是典型的两栏布局，一半后台管理都是这么设计的。左侧是菜单导航，右侧是内容。

1.2 利用BFC和float的实现

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局-float实现</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .parent {
            height: 400px;
            overflow: hidden;
        }

        .left {
            float: left;
            width: 200px;
            background-color: antiquewhite;
            height: 400px;
        }

        .right {
            margin-left: 210px;
            background-color: aqua;
            height: 400px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

界面如下:
在这里插入图片描述

1.3 利用flex实现

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局-flex实现</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .parent {
            height: 400px;
            display: flex;
        }

        .left {
            width: 200px;
            background-color: #d9534f;
        }

        .right {
            flex: 1;
            background-color: #e6a23c        
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

</body>
</html>

界面如下:
在这里插入图片描述

2.三栏布局

在这里插入图片描述

2.1 两边用float中间用margin

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局-两边用float中间用margin</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .parent {
            height: 400px;
           overflow: hidden;
        }

        .left {
            width: 200px;
            background-color: antiquewhite;
            height: 400px;
            float: left;
        }

        .right {
            width: 150px;
            background-color: aqua;
            height: 400px;
            float: right;

        }
        .middle {
            background-color: red;
            height: 400px;
            margin-left: 210px;
            margin-right: 160px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>

</body>
</html>

2.2 两边用absolute中间用margin

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局-两边用absolute中间用margin</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .parent {
           position: relative;
        }
        .left {
            width: 200px;
            background-color: antiquewhite;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .right {
            width: 150px;
            background-color: aqua;
            height: 400px;
            position: absolute;
            top: 0;
            right: 0;
        }
        .middle {
            background-color: red;
            height: 400px;
            margin-left: 210px;
            margin-right: 160px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>
</body>
</html>

2.3 两边用float和负margin

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局-两边用absolute中间用margin</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .left,
        .right,
        .main {
            height: 200px;
            line-height: 200px;
            text-align: center;

        }
        .main-wrapper {
            float: left;
            width: 100%;

        }

        .main {
            margin: 0 110px;
            background: black;
            color: white;

        }
        .left{
            float: left;
            width: 100px;
            margin-left: -100%;
            background: rebeccapurple;
        }
        .right {
            float: left;
            width: 100px;
            margin-left: -100px;
            background: red;
        }
    </style>
</head>
<body>
<div class="main-wrapper">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

界面如下:
在这里插入图片描述

2.4 flex

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局-flex</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .wrap {
            display: flex;
            justify-content: space-between;
        }
        .left,
        .right,
        .middle {
            height: 100px;
        }
        .left {
            width: 200px;
            background: coral;
        }
        .right {
            width: 120px;
            background: lightblue;
        }
        .middle {
            background: #555;
            flex: 1;
            margin: 0 20px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left"> </div>
    <div class="middle"> </div>
    <div class="right"> </div>
</div>
</body>
</html>

界面如下:
在这里插入图片描述

3.总结

(1)两栏布局

  • float实现
    • 给左侧区域使用float；
    • 右侧区域用margin-left:100px;
    • 给父元素开BFC(overflow:hidden)，防止下方元素飞到上方区域
  • flex实现
    • 父元素 display:flex;
    • 子元素 left:width:100px;
    • 子元素 right:flex:1;等同于flex:1 1 auto；

(2)三栏布局(圣杯布局)

  • 两边用float，中间用margin
  • 两边用position，中间用margin
  • 两边用float和负margin(这个不用管)
  • flex实现
    • 父元素:display:flex;justify-content:space-between;
    • 子元素middle{flex:1}
  • grid实现(与flex类似)
css实现两栏布局
weixin_45732235的博客
03-25 632
✨实现效果 ✨具体代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>两列布局</title> <style type="text/css"> /* 根元素设置为border-box */ :root { box-sizing: border-box; } /* 告诉其他所有元素和伪元素继承其盒模型 */
一文大白话讲清楚CSS实现两栏布局和三栏布局
xiaobangkeji的博客
12-30 1192
一文大白话讲清楚CSS实现两栏布局和三栏布局
CSS两栏布局
weixin_45732235的博客
03-11 427
左列定宽，右列自适应 方法1.浮动+margin实现 <div class="container"> <div class="left"></div> <div class="right"></div> </div> .left { width: 300px; height: 50vh; background-color: yellowgreen; float
CSS——两栏布局
goldgirly的博客
03-22 282
CSS——两栏布局利用浮动和标准流利用浮动和BFC利用绝对定位利用flex 首先设置两栏left和main，以及footer和header。 利用浮动和标准流 main保留为标准流，因为普通块级元素本身的width+padding+border+margin会自动填充父元素容器的宽度 left设置固定width并float: left，浮动元素允许块级元素和自己处于同一行，后面的main就会上...
使用CSS实现两栏布局：多种方法与最佳实践
My_wife_QBL的博客
07-12 1202
通过合理使用浮动、Flexbox和Grid布局，可以轻松实现两栏布局。每种方法都有其优势和适用场景，开发者可以根据具体需求选择合适的方法。希望本文能为开发者提供有价值的指导，帮助大家在实际项目中更好地应用这些CSS技巧。
CSS多栏布局-两栏布局和三栏布局
富朝阳的博客
05-14 2787
相信大家在面试的时候也会经常碰到两栏、三栏布局，一下列出来几种方式以供大家参考，废话不多说，直接上干货，如有不足之处，请大家补充。
CSS中的BFC详解（两栏布局和三栏布局）
weixin_45432334的博客
10-09 1739
一、BFC介绍 BFC（Block fomatting context）“块级格式化上下文”。是Web页面中盒模型布局的CSS渲染模式，是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 二、形成BFC的条件 1、根元素 2、float属性不为none 3、position为absolute或fixed 4、display为inline-blo...
两栏布局、三栏布局、水平垂直居中
最新发布
weixin_45980065的博客
02-02 1908
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。利用浮动，将左边元素宽度设置为200px，并且设置向左浮动，将右边元素的margin-left设置为200px，宽度设置为auto，撑满整个父元素。 1.2 浮动 + BFC 利用浮动，左侧元素设置固定大小，并且设置向左浮动，右侧元素设置 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。 1.3 flex布局 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为。 1.4 左绝父相 + margi
一文汇总 CSS 两列布局和三列布局的具体使用
01-19
但是，基础的 CSS 依然需要我们熟练掌握，今天就来总结写下 CSS 布局的方式。 两列布局 左列定宽，右列自适应 float + margin 布局 html 代码 <body> 左列定宽 右列自适应 </body> css 代码： #...
CSS实现页面两列布局与三列布局的方法示例
09-27
本文将详细讲解如何使用CSS实现两列布局和三列布局，以及如何实现宽度和高度的自适应。 首先，我们来看一种基于BFC（块格式化上下文，Block Formatting Context）原理的三列布局方法。BFC是一个独立的渲染区域，它...
css--两栏布局易懂的5种方法
lixiaoqidecsdn的博客
01-13 1222
1.左侧固定，右侧自适应 <style> .left { width: 200px; height: 600px; background-color: rgb(247, 10, 10); float: left; } .right { height: 600px; margin-left: 200px; background-color: blue; .
【总结】：CSS常用的两栏布局方法（最全面）
2401_84093490的博客
05-16 958
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
css布局之浮动模型&&左右两栏自适应布局
Jancy的博客
02-28 2432
一个元素浮动时，其他内容会“环绕”该元素，浮动元素要设置一个width。浮动元素会自动生成一个块级框（行内元素会转成块级元素）。浮动元素规则浮动元素不能超过包含它的块的左右内边界。 浮动元素之前如果出现浮动元素，则必须在该浮动元素之后（不能覆盖 )。如果浮动元素加一起太宽，会自动向下。垂直方向要顶头不能超过块区域，同样不能超过在它上面的浮动元素。浮动元素脱离文档流，不占据空间。不浮动的块级元素
CSS 布局技巧实现元素左右排列
weixin_52648900的博客
09-12 6004
使用 CSS 实现一个子元素靠右，其余子元素靠左的四种常见方法，推荐使用 flex。
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
dxy1128的博客
11-03 3980
写在前面：博主最近在转头复习最前面学的CSS，整理一下CSS三栏布局的笔记，正好也捋顺自己的逻辑思路。解析我尽量按照思路详细的写了，代码均可正确运行，留给需要的小伙伴进行参考，如有不足，欢迎在评论区补充。
实现两栏布局(左边固定，右边自适应)的六种方法
qq_43456687的博客
04-12 4457
html内容如下 <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div> 方法一：利用float .left { float: left; width: 200px; background-color: pink;
CSS | CSS实现两栏布局和三栏布局方法详解
青春木鱼的博客
09-30 1879
CSS实现两栏布局和三栏布局方法详解
CSS实现三栏布局
weixin_43162494的博客
06-23 1837
css实现三栏布局
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

太阳与星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值