css实现三栏布局

最新推荐文章于 2023-06-23 19:33:50 发布
最新推荐文章于 2023-06-23 19:33:50 发布
阅读量109 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zch3210/article/details/86636324
版权

左右定宽，中间自适应

（1） 使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left,.right{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #d7d4f0;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .center{
            margin:0 100px 0 100px;
            height: 100px;
            background-color: #2aa198;
        }
    </style>
</head>
<body>
<div>
    <div class="left">
        左侧定宽
    </div>
    <div class="right">
        右侧定宽
    </div>
    <!--放在最后，写在中间没有效果-->
    <div class="center">
        中间自适应
    </div>
</div>
</body>
</html>

效果图如下：

（2）使用左右两栏使用float属性，中间栏使用margin属性进行撑开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left,.right{
            width: 100px;
            height: 100px;
            background-color: #d7d4f0;
        }
        .left{
           float: left;
        }
        .right{
            float: right;
        }
        .center{
            margin: 0 100px;
            height: 100px;
            background-color: #2aa198;
        }
    </style>
</head>
<body>
<div>
    <div class="left">
        左侧定宽
    </div>
    <div class="right">
        右侧定宽
    </div>
    <!--放在最后，写在中间没有效果-->
    <div class="center">
        中间自适应
    </div>
</div>
</body>
</html>

效果图如下：

（3）margin负值法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            position: relative;
            float: left;
            width: 100px;
            height: 100px;
            margin-right: -100px;
            background-color: #0baae4;
        }
        .center{
            float: left;
            width: 100%;
            height: 100px;
            background-color: #A8A297;
        }
        .right{
            position: relative;
            float: right;
            width: 100px;
            height: 100px;
            margin-left: -100px;
            background-color: #0baae4;
        }
        p{
            margin:0 100px 0 100px;
            background-color: #2aa198;
        }
    </style>
</head>
<body>
<div>
    <div class="left">
        左侧定宽
    </div>
    <div class="center">
        <p>中间自适应</p>
    </div>
    <div class="right">
        右侧定宽
    </div>
</div>
</body>
</html>

效果图如下：

（4） flex法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bj{
            display: flex;
        }
        .left,.right{
            width: 100px;
            height: 100px;
            background-color: #d7d4f0;
        }
        .center{
            width: 100%;
            height: 100px;
            background-color: #2aa198;
        }
    </style>
</head>
<body>
<div class="bj">
    <div class="left">
        左侧定宽
    </div>
    <div class="center">
        中间自适应
    </div>
    <div class="right">
        右侧定宽
    </div>
</div>
</body>
</html>

效果图如下：

左侧，中间定宽，右侧自适应

  margin负值法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            position: relative;
            float: left;
            width: 100px;
            height: 100px;
            background-color: #A8A297;
        }
        .center{
            position: relative;
            float: left;
            width: 100px;
            height: 100px;
            background-color: #0baae4;
        }
        .right{
            float: right;
            width: 100%;
            height: 100px;
            background-color: #d7d4f0;
            margin-left: -200px;
        }
        p{
            margin: 0 0 0 200px;
            background-color: #2aa198;
        }
    </style>
</head>
<body>
<div>
    <div class="left">
        左侧定宽
    </div>
    <div class="center">
        中间定宽
    </div>
    <div class="right">
        <p>右侧自适应</p>
    </div>
</div>
</body>
</html>

效果图如下：

小周周i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS实现三栏布局的8种方式
cute_ming的博客
04-24 1467
1、float实现三栏布局 给左盒子设置float：left，给右盒子设置float：right，中间盒子设置margin-left和margin-right。需要注意的是，左右盒子要放在中间盒子之前。代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
css三栏布局
Little_ChenH的博客
02-05 706
css三栏布局 1.圣杯布局 圣杯概述：父盒子包含三个子盒子（左，中，右） 核心思想： 1. 父盒子设置左右的 margin（或者padding） 来为左右盒子预留留位置； 2. 中间盒子的宽度设置为 width: 100%，实现中间宽度自适应； 3. 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行； - .left {m...
CSS实现三栏布局
weixin_43162494的博客
06-23 1535
css实现三栏布局
CSS之三栏布局
liuzijiang1123的专栏
05-07 595
方法一：浮动布局 代码： &amp;amp;lt;div class=&amp;quot;float-wrapper&amp;quot;&amp;amp;gt; &amp;amp;lt;style&amp;amp;gt; .float-wrapper{ width:100%; } .float-wrapper .left{ float:left;
CSS实现三栏布局的四种方法示例
09-24
可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看...
CSS 三栏等高布局实现方法
09-25
CSS 三栏等高布局实现方法 CSS 三栏等高布局是指在页面中实现三个等高的栏目，每个栏目的高度可以根据内容的变化而变化。本实施方法可以将三个栏目等高地排列在一起，且不需要写死高度。 首先，需要了解三栏等高...
css实现三栏布局的几种方法及优缺点
09-22
Flexbox（弹性盒模型）是CSS3引入的一种新的布局模式，可以轻松实现三栏布局。通过设置容器的`display: flex`和子元素的`flex`属性，可以灵活地调整元素的排列和大小。 优点： - 布局灵活，支持动态调整元素大小和...
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
Python性能优化：掌握性能分析工具的实战指南
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
Android学习系列之gradle实战
07-23
Android学习系列之gradle实战
RFC 3261中文版技术文档
07-23
**标题与描述解析** 标题"RFC 3261 中文文档"指的是互联网请求评论（Request for Comments）3261的中文版本。RFC 3261是互联网工程任务组（IETF）发布的一个重要标准，它定义了SIP（Session Initiation Protocol，会话初始协议）的核心规范。SIP是一种用于建立、修改和终止多媒体通信会话的协议，广泛应用于VoIP（Voice over IP，IP语音）和统一通信系统中。 描述同样简洁明了，只强调了这是RFC 3261的中文翻译，意味着对于中文读者来说，这个文档提供了一个理解SIP协议的中文语言资源。 **标签解析** "RFC3261 中文"标签进一步确认了文档的内容，表明这是关于RFC 3261的中文资料，便于搜索和分类。 **压缩包子文件的文件名称列表** 文件名为"RFC3261 中文.mht"，这是一个单一网页文件，通常包含HTML、图像和其他资源，用于保存完整的网页内容。用户可以通过打开这个文件来查看RFC 3261的中文翻译。 **SIP协议详述** SIP协议是基于文本的，其设计类似于HTTP
嵌入式LinuxC语言程序设计基础教程第8章函数解读.doc
07-23
嵌入式
DirectShow滤镜：字幕叠加功能（含注解说明）
07-23
DirectShow Transform Filter最典型的例子，带注释，难度不大，学习必备 博客对应文章http://blog.csdn.net/leixiaohua1020/article/details/12498975。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
b069牙科就诊管理系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
牙科就诊管理系统利用当下成熟完善的SSM框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发。实现了用户在线查看数据。管理员管理病例管理、字典管理、公告管理、药单管理、药品管理、药品收藏管理、药品评价管理、药品订单管理、牙医管理、牙医收藏管理、牙医评价管理、牙医挂号管理、用户管理、管理员管理等功能。牙科就诊管理系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。 管理员在后台主要管理病例管理、字典管理、公告管理、药单管理、药品管理、药品收藏管理、药品评价管理、药品订单管理、牙医管理、牙医收藏管理、牙医评价管理、牙医挂号管理、用户管理、管理员管理等。 牙医列表页面，此页面提供给管理员的功能有：查看牙医、新增牙医、修改牙医、删除牙医等。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。药品管理页面，此页面提供给管理员的功能有：新增药品,修改药品,删除药品。药品类型管理页面，此页面提供给管理员的功能有：新增药品类型,修改药品类型,删除药品类型。
2014年4月-2023年11月上市公司ESG数据（秩鼎）（月度数据）.xlsx
07-23
2014年4月-2023年上市公司秩鼎ESG评级数据 1、时间：2014年4月-2023年11月 2、来源:秩鼎数据 3、指标：证券代码、SC、评级日期、ESG评级、ESG等级、ESG得分、E评级、E等级、E得分、S评级、S等级、S得分、G评级、G等级、G得分、总市值(亿元)、流通市值(亿元)、市盈率(TTM)、ESG标准正态、E标准正态、S标准正态、G标准正态、三者标准差、证券简称、 4、范围：上市公司
Sequator执行文件
07-23
Sequator.exe。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
flex实现三栏布局
09-02
- *3* [css3弹性盒子flex实现三栏布局的实现](https://download.csdn.net/download/weixin_38726441/14919543)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值