实现两栏布局和三栏布局的多种详细方法

目录

    • 一、背景
      • 两栏布局
      • 三栏布局
    • 二、两栏布局
      • flex弹性布局
    • 三、三栏布局
      • 两边使用 float,中间使用 margin
      • 两边使用 absolute,中间使用 margin
      • 两边使用 float 和负 margin
      • 使用 display: table 实现
      • 使用flex实现
      • grid网格布局
    • 参考文献

一、背景

在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高

两栏布局

两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满,

比如 Ant Design 文档,蓝色区域为主要内容布局容器,侧边栏为次要内容布局容器

这里称宽度较小的列父元素为次要布局容器,宽度较大的列父元素为主要布局容器

这种布局适用于内容上具有明显主次关系的网页

三栏布局

三栏布局按照左中右的顺序进行排列,通常中间列最宽,左右两列次之

大家最常见的就是github

二、两栏布局

两栏布局非常常见,往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路也非常的简单:

  • 使用 float 左浮左边栏
  • 右边模块使用 margin-left 撑出内容块做内容展示
  • 为父级元素添加BFC,防止下方元素飞到上方内容

代码如下:

<style>.box{overflow: hidden; 添加BFC}.left {float: left;width: 200px;background-color: gray;height: 400px;}.right {margin-left: 210px;background-color: lightgray;height: 200px;}
</style>
<div class="box"><div class="left">左边</div><div class="right">右边</div>
</div>

还有一种更为简单的使用则是采取:flex弹性布局

flex弹性布局

<style>.box{display: flex;}.left {width: 100px;}.right {flex: 1;}
</style>
<div class="box"><div class="left">左边</div><div class="right">右边</div>
</div>

flex可以说是最好的方案了,代码少,使用简单

注意的是,flex容器的一个默认属性值:align-items: stretch;

这个属性导致了列等高的效果。 为了让两个盒子高度自动,需要设置: align-items: flex-start

三、三栏布局

实现三栏布局中间自适应的布局方式有:

  • 两边使用 float,中间使用 margin
  • 两边使用 absolute,中间使用 margin
  • 两边使用 float 和负 margin
  • display: table 实现
  • flex实现
  • grid网格布局

两边使用 float,中间使用 margin

需要将中间的内容放在html结构最后,否则右侧会臣在中间内容的下方

实现代码如下:

<style>.wrap {background: #eee;overflow: hidden; <!-- 生成BFC,计算高度时考虑浮动的元素 -->padding: 20px;height: 200px;}.left {width: 200px;height: 200px;float: left;background: coral;}.right {width: 120px;height: 200px;float: right;background: lightblue;}.middle {margin-left: 220px;height: 200px;background: lightpink;margin-right: 140px;}
</style>
<div class="wrap"><div class="left">左侧</div><div class="right">右侧</div><div class="middle">中间</div>
</div>

原理如下:

  • 两边固定宽度,中间宽度自适应。
  • 利用中间元素的margin值控制两边的间距
  • 宽度小于左右部分宽度之和时,右侧部分会被挤下去

这种实现方式存在缺陷:

  • 主体内容是最后加载的。

  • 右边在主体内容之前,如果是响应式设计,不能简单的换行展示

两边使用 absolute,中间使用 margin

基于绝对定位的三栏布局:注意绝对定位的元素脱离文档流,相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序

<style>.container {position: relative;}.left,.right,.main {height: 200px;line-height: 200px;text-align: center;}.left {position: absolute;top: 0;left: 0;width: 100px;background: green;}.right {position: absolute;top: 0;right: 0;width: 100px;background: green;}.main {margin: 0 110px;background: black;color: white;}
</style><div class="container"><div class="left">左边固定宽度</div><div class="right">右边固定宽度</div><div class="main">中间自适应</div>
</div>

实现流程:

  • 左右两边使用绝对定位,固定在两侧。
  • 中间占满一行,但通过 margin和左右两边留出10px的间隔

两边使用 float 和负 margin

<style>.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,.right {float: left;width: 100px;margin-left: -100%;background: green;}.right {margin-left: -100px; /* 同自身宽度 */}
</style><div class="main-wrapper"><div class="main">中间自适应</div>
</div>
<div class="left">左边固定宽度</div>
<div class="right">右边固定宽度</div>

实现过程:

  • 中间使用了双层标签,外层是浮动的,以便左中右能在同一行展示
  • 左边通过使用负 margin-left:-100%,相当于中间的宽度,所以向上偏移到左侧
  • 右边通过使用负 margin-left:-100px,相当于自身宽度,所以向上偏移到最右侧

缺点:

  • 增加了 .main-wrapper 一层,结构变复杂
  • 使用负 margin,调试也相对麻烦

使用 display: table 实现

<table> 标签用于展示行列数据,不适合用于布局。但是可以使用 display: table 来实现布局的效果

<style>.container {height: 200px;line-height: 200px;text-align: center;display: table;table-layout: fixed;width: 100%;}.left,.right,.main {display: table-cell;}.left,.right {width: 100px;background: green;}.main {background: black;color: white;width: 100%;}
</style><div class="container"><div class="left">左边固定宽度</div><div class="main">中间自适应</div><div class="right">右边固定宽度</div>
</div>

实现原理:

  • 层通过 display: table设置为表格,设置 table-layout: fixed`表示列宽自身宽度决定,而不是自动计算。
  • 内层的左中右通过 display: table-cell设置为表格单元。
  • 左右设置固定宽度,中间设置 width: 100% 填充剩下的宽度

使用flex实现

利用flex弹性布局,可以简单实现中间自适应

代码如下:


<style type="text/css">.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;width: 100%;margin: 0 20px;}
</style>
<div class="wrap"><div class="left">左侧</div><div class="middle">中间</div><div class="right">右侧</div>
</div>

实现过程:

  • 仅需将容器设置为display:flex;
  • 盒内元素两端对其,将中间元素设置为100%宽度,或者设为flex:1,即可填充空白
  • 盒内元素的高度撑开容器的高度

优点:

  • 结构简单直观
  • 可以结合 flex的其他功能实现更多效果,例如使用 order属性调整显示顺序,让主体内容优先加载,但展示在中间

grid网格布局

代码如下:

<style>.wrap {display: grid;width: 100%;grid-template-columns: 300px auto 300px;}.left,.right,.middle {height: 100px;}.left {background: coral;}.right {background: lightblue;}.middle {background: #555;}
</style>
<div class="wrap"><div class="left">左侧</div><div class="middle">中间</div><div class="right">右侧</div>
</div>

flex弹性布局一样的简单

参考文献

  • https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/
  • https://segmentfault.com/a/1190000008705541

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/661045.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

永磁同步电机速度环闭环控制

文章目录 1、速度环分析2、电机参数3、PI计算4、模型仿真4.1 模型总览4.2 实际转速与参考转速对比4.3 转矩波形4.4 相电流采样波形 模型下载地址&#xff1a; 链接: 速度闭环模型&#xff08;速度电流双闭环&#xff09; 1、速度环分析 2、电机参数 Udc24 V Rs0.6 LdLq1.4e-3…

【2024美国大学生数学建模竞赛】2024美赛C题 问题分析、数学模型、实现代码、完整论文

【2023美国大学生数学建模竞赛】2024美赛C题 问题分析、数学模型、实现代码、完整论文 引言 题目将于2024年2月2日6:00发布。我们团队将会在8点前准时更新问题分析&#xff0c;逐步更新数学模型和实现代码&#xff0c;最后发布完整的论文。 更新进展&#xff1a; &#xff08;…

Java开发常用框架:效率框架、测试框架、日志框架、安全框架总结

目录 1、Java效率框架 1.Lombox 2.MapStruct 2、测试框架 1.JUnit 2.TestNG 3、日志框架 1.Log4j 2.SLF4J 4、安全框架 1.Spring Security 2.Apache Shiro 1、Java效率框架 常见Java效率框架&#xff1a;Lombox、MapStruct等。 1.Lombox Lombox和MapStruct都是常见…

docker导出conda环境的流程

要在 Docker 中导出 Conda 环境&#xff0c;需要创建一个 Docker 镜像&#xff0c;该镜像包含 Conda 环境。 步骤如下&#xff1a; 创建 Conda 环境并导出环境文件&#xff1a; 首先&#xff0c;在本地机器上创建一个 Conda 环境。 然后使用 conda env export > environme…

【算法】Partitioning the Array(数论)

题目 Allen has an array a1,a2,…,an. For every positive integer k that is a divisor of n, Allen does the following: He partitions the array into n/k disjoint subarrays of length k. In other words, he partitions the array into the following subarrays: [a1,…

【Redis】签到点赞和UV统计

Redis签到点赞和UV统计 点赞 点赞功能分析 需求&#xff1a; 同一个用户只能点赞一次&#xff0c;再次点击则取消点赞如果当前用户已经点赞&#xff0c;则点赞按钮高亮显示&#xff08;前端判断字段isLike属性&#xff09; 实现步骤&#xff1a; 利用Redis的set集合判断是…

关于修改数据库服务器时间导致达梦数据库集群裂开

故障原因&#xff1a; 因为每天数据库服务器时间都不一致&#xff0c;想要给数据库服务器配置个NTP服务器。结果导致达梦数据库裂库。后面查看了达梦系统管理员手册了解了达梦集群的机制&#xff0c;知道数据库服务器时间需要先关闭数据库服务之后才可以修改数据库服务器时间。…

五款颠覆工作方式的工作软件

在当今快节奏的工作环境中&#xff0c;选择合适的工作软件是提高效率、实现协作的关键。感谢你的提问&#xff0c;下面我将为你介绍五款令人赞叹的工作软件&#xff0c;它们会让你的工作变得更有趣而富有成效&#xff01; 1. 亿可达 是我最近在用的一款软件连接器&#xff0c…

ubuntu16.04环境轻松安装和应用opencv4.9.0(基于源码编译)

目录 一、环境准备 1、安装cmake 2、安装依赖 3、从github上下载opencv4.9.0.zip 二、安装opencv4.9.0 1、解压4.9.0.zip 2、进入build目录编译 3、安装编译好的相关库 4、修改opencv配置文件并使其生效 5、添加PKG_CONFIG路径&#xff0c;并使其生效 三、opencv环境…

聚道云软件连接器:连接薪人薪事与携程商旅的桥梁,出差管理效率的新篇章

客户介绍 某科技有限公司是一家专注于提供数字化解决方案的高科技企业。公司拥有一支由业内资深专家和优秀工程师组成的团队&#xff0c;致力于为企业提供全方位的数字化服务。该公司拥有自主研发能力&#xff0c;拥有多项知识产权和专利技术&#xff0c;确保为客户提供技术领…

2024美赛数学建模A题思路源码

比赛当天第一时间更新&#xff01; 赛题目的 赛题目的&#xff1a; 问题描述&#xff1a; 解题的关键&#xff1a; 问题一. 问题分析 问题解答 问题二. 问题分析 问题解答 问题三. 问题分析 问题解答 问题四. 问题分析 问题解答 问题五. 问题分析 问题解答

数值函数

目录 四舍五入操作 测试四舍五入 截取小数(所有的小数都不进位) 求模(求余数) 求模操作 Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 数值函数可以对数字进行处理&#xff0c;常用的主要函数有 3 个&#xff1a; round()、trunc…

力扣刷题-169.多数元素

给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] 输出&#xff1a;3 示例 …

Aigtek大功率信号源怎么使用的

大功率信号源是在实验室、测试和通信系统中经常使用的重要设备。它能够提供高功率的信号&#xff0c;用于驱动各种设备和系统。在使用大功率信号源时&#xff0c;有一些关键的步骤和指南&#xff0c;可以确保安全、有效地操作设备并获得稳定的输出。本文将详细介绍大功率信号源…

docker-compose部署开源培训系统playedu

docker-compose 安装 本文安装过程需要您准备以下环境&#xff1a; Dockerdocker-compose 第一步、下载 playedu-docker-compose 仓库 git clone -b 1.5.1 https://gitee.com/playeduxyz/compose.git playedu-docker-compose第二步、构建镜像 下面命令 # 开头的是对下一行命…

DevOps落地笔记-05|非功能需求:如何有效关注非功能需求

上一讲主要介绍了看板方法以及如何使用看板方法来解决软件研发过程中出现的团队过载、工作不均、任务延期等问题。通过学习前面几个课时介绍的知识&#xff0c;你的团队开始源源不断地交付用户价值。用户对交付的功能非常满意&#xff0c;但等到系统上线后经常出现服务不可用的…

C程序设计(第5版)谭浩强习题解答 第6章 利用数组处理批量数据

C程序设计(第5版)谭浩强习题解答 第6章 利用数组处理批量数据 1.用筛选法求100之内的素数 #include <stdio.h> #include <math.h> int main() {int i, j, n, a[101];for (i 1; i < 100; i)a[i] i;a[1] 0;for (i 2; i < sqrt(100); i)for (j i 1; j …

笔记--扩展欧几里得算法

AcWing.877.欧几里得算法 给定 n n n 对正整数 a a ai, b b bi&#xff0c;对于每对数&#xff0c;求出一组 x x xi, y y yi&#xff0c;使其满足 a a ai x x xi b b bi y y yi g c d ( a gcd(a gcd(ai , b ,b ,bi ) ) )。 输入格式 第一行包含整数 n n n。 接下来 …

【Spring框架】@Cacheable注解:缓存最佳实践

在Java开发中&#xff0c;性能优化是一个永恒的话题。对于使用Spring框架的应用程序来说&#xff0c;Cacheable 注解提供了一种简单有效的方式来提升性能&#xff0c;特别是对于那些计算成本高或数据变化不频繁的操作。本文将深入探讨 Cacheable 的使用方法和注意事项&#xff…

在Vue 3中,理解使用defineEmits函数来定义组件的事件。

在Vue 3中&#xff0c;可以使用defineEmits函数来定义组件的事件。defineEmits函数接受一个对象作为参数&#xff0c;该对象的键是事件名&#xff0c;值是一个回调函数或一个函数数组。这些回调函数将被组件中的$emit方法触发。 以下是一个示例&#xff1a; import { defineC…