两栏布局和三栏布局的实现方法

两栏布局

右侧不设置宽，实现一栏自适应。

1. float + margin-left

左侧设置float，且设置宽度，右侧margin-left为左侧的宽度

<head><style>.left{width: 300px;height: 500px;background-color: palegreen;float: left;}.right{margin-left: 300px;height: 500px;background-color: wheat;}</style>
</head>
<body><div><div class="left"></div><div class="right"></div></div>
</body>

但是有一个情况

<div class="box"><div class="left"></div><div class="right"></div>
</div>
内容

 内容在盒子外，但却跑到右边去了。

这是因为使用了float浮动的原因，浮动导致元素脱离原本的文档流，导致父元素高度塌陷，其他内容快便会自动排版上去，可使用触发bfc的方式，为父元素添加BFC，防止下方元素飞到上方元素。

.box{overflow: hidden;
}

2. float + overflow

左侧float，并设置宽，右侧overflow：hidden，实现自适应。

此方法也会出现父元素高度塌陷的问题，所以给父元素添加overflow：hidden

<style>.left{width: 300px;height: 400px;background-color: palegreen;float: left;}.right{height: 200px;overflow: hidden;background-color: wheat;}.box{overflow: hidden;}</style>

3. absolute定位

父元素设置position：relative

左侧固定宽度，右侧设置absolute，并且设置top为0，让元素上移，left为左侧固定宽度，right为0，让其能够自适应

<style>.left{width: 300px;height: 400px;background-color: palegreen;}.right{height: 200px;background-color: wheat;position: absolute;top: 0;left: 300px;right: 0;}.box{position: relative;}
</style>

4. flex布局（推荐使用）

方法较为简单

父元素设置display为flex，左侧固定宽度，右侧设置flex为1，自动填充容器

<style>.left{width: 300px;height: 400px;background-color: palegreen;}.right{height: 200px;background-color: wheat;flex: 1;}.box{display: flex;}
</style>

三栏布局

实现左右固定，中间自适应

当实现中间部分前置的，意思就是html中将中间部分写在最前面，可以实现中间部分优先加载

1. flex布局（推荐）

父元素设置display为flex，左右固定宽度，中间元素设置flex为1，自动填充容器。不可前置

<head><style>.left{width: 300px;height: 400px;background-color: darkcyan;}.middle{background-color: gold;height: 500px;flex: 1;}.right{width: 300px;height: 200px;background-color: olivedrab;}.box{display: flex;}</style>
</head>
<body><div class="box"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
</body>

2. absolute + margin

父元素设置relative，左右absolute固定在两侧，left设置top和left为0，右侧设置top和right为0

中间使用margin让左右外边距为两侧固定宽度

该方法可将middle前置

    <style>.left{width: 300px;height: 400px;background-color: darkcyan;position: absolute;top: 0;left: 0;}.middle{background-color: gold;height: 500px;margin-left: 300px;margin-right: 200px;}.right{width: 200px;height: 200px;background-color: olivedrab;position: absolute;top: 0;right: 0;}.box{position: relative;}</style>
</head>
<body><div class="box"><div class="middle"></div><div class="left"></div><div class="right"></div></div>
</body>

3. float + margin

左右两侧设置float浮动，左侧为left，右侧为right

中间margin设置左右外边距为左右固定宽度

注意：middle元素要放在最后，因为div独占一行，前面设置浮动，后面就会尾随其上，如果middle放在第二个，那么会占一行，右边即使设置float都会在下一行显示

<head><style>.left{width: 300px;height: 400px;background-color: darkcyan;float: left;}.middle{background-color: gold;height: 500px;margin-left: 300px;margin-right: 200px;}.right{width: 200px;height: 200px;background-color: olivedrab;float: right;}</style>
</head>
<body><div class="box"><div class="left"></div><div class="right"></div><div class="middle"></div></div>
</body>

如果middle在第二个，将会变成下图这样

4. table（不常用）

父元素设置display为table，table-layout为fixed，宽度是由自身宽度决定，而不是自动计算，并且要设置宽度，不然中间的width将会撑满全屏

左中右都设置display为table-cell，为表格单元，左右固定宽，中间width为100%，实现自适应

该方法不可实现中间元素前置

<style>.left{width: 300px;height: 400px;background-color: darkcyan;}.middle{background-color: gold;height: 500px;width: 100%;}.right{width: 200px;height: 200px;background-color: olivedrab;}.box{display: table;table-layout: fixed;width: 800px;}.left,.middle,.right{display: table-cell;}
</style>

5. grid网格布局

父元素设置display为grid，grid-template-columns: 左宽度 auto 右宽度

该方法不可实现中间元素前置

<style>.left{/* width: 300px; */height: 400px;background-color: darkcyan;}.middle{background-color: gold;height: 500px;}.right{/* width: 200px; */height: 200px;background-color: olivedrab;}.box{width: 800px;display: grid;grid-template-columns: 300px auto 200px;}
</style>

6. 圣杯布局

首先middle元素要写在第一个，然后步骤为：

给父元素设置padding-left和padding-right，空出左右栏的位置；

左中右设置浮动；

中间设置width为100%，实现自适应；

左右宽度为父元素的左右内边距padding；

左侧设置margin-left为-100%，让元素到上一行，且向左移动，与父元素左边缘对齐，然后设置定位relative，left为负的自身宽度；

右侧设置margin-left为负的自身宽度，定位relative，right为负的自身宽度


<style>.left{width: 300px;height: 400px;background-color: darkcyan;float: left;margin-left: -100%;left: -300px;position: relative;}.middle{background-color: gold;height: 500px;width: 100%;float: left;}.right{width: 200px;height: 200px;background-color: olivedrab;float: left;margin-left: -200px;position: relative;right: -200px;}.box{padding-left: 300px;padding-right: 200px;}
</style><body><div class="box"><div class="middle"></div><div class="left"></div><div class="right"></div></div>
</body>

7. 双飞翼布局

中间元素使用双层标签

与圣杯布局类似，左右和center设置浮动，center的width为100%，左侧设置margin-left为-100%，右侧margin-left为负的自身宽度，middle设置margin左右外边距为左右固定宽度，且高度和颜色设置在middle中

中间元素也需要写在第一个

<style>.left{width: 300px;height: 400px;background-color: darkcyan;float: left;margin-left: -100%;}.center{float: left;width: 100%;}.middle{height: 500px;margin-left: 300px;margin-right: 200px;background-color: gold;}.right{width: 200px;height: 200px;background-color: olivedrab;float: left;margin-left: -200px;}
</style><body><div class="box"><div class="center"><div class="middle"></div></div><div class="left"></div><div class="right"></div></div>
</body>

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

AI 基础设施：构建AI时代全栈云计算体系

AI 基础设施：构建AI时代全栈云计算体系

生成式AI 新时代下催生新的基础设施需求 随着企业在数字化转型之路上越走越远&#xff0c;期间一场新的技术革命正在发生&#xff0c;近几年涌现的生成式AI技术正在迅速改变科技、商业和整个社会的格局。这种强大的技术能够从数据中学习并生成预测性输出&#xff0c;生成式 AI …
阅读更多...
使用chatgpt降低论文重复率的方法和需要注意的一些细节

使用chatgpt降低论文重复率的方法和需要注意的一些细节

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 要降低论文的重复率&#xff0c;可以借助ChatGPT进行多种方式的优化。以下是几种策略&#xff1a; 1. 重写段落或句子&#xff1a; 输入你认为可能重复率较高的段落或句子&#xff0c;…
阅读更多...
前端JavaScript导出excel,并用excel分析数据，使用SheetJS导出excel

前端JavaScript导出excel,并用excel分析数据，使用SheetJS导出excel

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…
阅读更多...
Windows通过网线传文件

Windows通过网线传文件

文章目录 网线网络中看不到另一台计算机Nginx参考文献 网线 两台电脑用网线连接 电脑A 控制面板\网络和 Internet\网络和共享中心 → 更改适配器设置 → 右键以太网&#xff08;未识别的网络&#xff09; → 属性 → Internet 协议版本 4 (TCP/IPv4) 属性 → 使用下面的 IP …
阅读更多...
SQL编程题复习（24/9/19）

SQL编程题复习（24/9/19）

练习题 x25 10-145 查询S001学生选修而S003学生未选修的课程&#xff08;MSSQL&#xff09;10-146 检索出 sc表中至少选修了’C001’与’C002’课程的学生学号10-147 查询平均分高于60分的课程&#xff08;MSSQL&#xff09;10-148 检索C002号课程的成绩最高的二人学号&#xf…
阅读更多...
en造数据结构与算法C# 群组行为优化 和 头鸟控制

en造数据结构与算法C# 群组行为优化 和 头鸟控制

实现&#xff1a; 1.给鸟类随机播放随机动画使得每一只鸟扇翅膀的频率都不尽相同 2.可以自行添加权重&#xff0c;并在最后 sumForce separationForce cohesionForce alignmentForce;分别乘上相应权重&#xff0c;这样鸟就能快速飞行和转向辣 using System.Collections.Ge…
阅读更多...
小程序地图展示poi帖子点击可跳转

小程序地图展示poi帖子点击可跳转

小程序地图展示poi帖子点击可跳转 是类似于小红书地图功能的需求 缺点 一个帖子只能有一个点击事件&#xff0c;不适合太复杂的功能&#xff0c;因为一个markers只有一个回调回调中只有markerId可以使用。 需求介绍 页面有地图入口&#xff0c;点开可打开地图界面地图上展…
阅读更多...
安全热点问题

安全热点问题

安全热点问题 1.DDOS2.补丁管理3.堡垒机管理4.加密机管理 1.DDOS 分布式拒绝服务攻击&#xff0c;是指黑客通过控制由多个肉鸡或服务器组成的僵尸网络&#xff0c;向目标发送大量看似合法的请求&#xff0c;从而占用大量网络资源使网络瘫痪&#xff0c;阻止用户对网络资源的正…
阅读更多...
[Unity Demo]从零开始制作空洞骑士Hollow Knight第六集：制作小骑士完整的跳跃落地行为

[Unity Demo]从零开始制作空洞骑士Hollow Knight第六集：制作小骑士完整的跳跃落地行为

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、制作一个完整的小骑士跳跃落地行为 1.制作动画以及UNITY编辑器编辑2.使用代码实现完整的跳跃落地行为控制3.更多要考虑到的点总结 前言 大家好久不见&…
阅读更多...
NX重命名另存装配

NX重命名另存装配

步骤看图&#xff1a;
阅读更多...
基于MTL的多任务视频推荐系统

基于MTL的多任务视频推荐系统

多任务学习&#xff0c;也就是MTL(Multi-task Learning)&#xff0c;现在已经被用在很多领域了&#xff0c;比如处理自然语言、搞计算机视觉&#xff0c;还有语音识别这些领域。MTL在大规模的推荐系统里也玩得挺溜&#xff0c;尤其是那些做视频推荐的大家伙。 MTL的玩法就是&a…
阅读更多...
NLP 主要语言模型分类

NLP 主要语言模型分类

文章目录 ngram自回归语言模型TransformerGPTBERT&#xff08;2018年提出&#xff09;基于 Transformer 架构的预训练模型特点应用基于 transformer&#xff08;2017年提出&#xff0c;attention is all you need&#xff09;堆叠层数与原transformer 的差异bert transformer 层…
阅读更多...
浅谈穷举法

浅谈穷举法

穷举法 穷举法是一种通过逐一列举所有可能情况来寻找解决方案的方法。就像找到一把钥匙打开一把锁&#xff0c;我们会尝试每一把钥匙直到找到正确的那一把。比如&#xff0c;如果你忘记了自己的密码&#xff0c;可以尝试每一种可能的组合直到找到正确的密码为止 穷举法的结构 …
阅读更多...
【Python】快速判断两个commit 是否存在cherry-pick 关系

【Python】快速判断两个commit 是否存在cherry-pick 关系

判断两个提交是否有 cherry-pick 关系的 Python 脚本&#xff0c;可以基于以下三种常见情况进行优化&#xff1a; Commit Hash 一致&#xff1a;如果两个提交的 hash 完全相同&#xff0c;那么它们是相同的提交。 Commit Title 存在关联&#xff1a;如果两个提交的 commit mes…
阅读更多...
如何下载ComfyUI开发版

如何下载ComfyUI开发版

看B站视频&#xff0c;见用绘世可以下载ComfyUI开发版&#xff0c;而我又不想在电脑里放太多东西&#xff0c;于是研究了一下&#xff0c;如何直接从GitHub网站下载。具体步骤看图示。 看压缩包内容&#xff0c;应该直接解压覆盖就可以了&#xff0c;暂未有时间测试。
阅读更多...
科研绘图系列：R语言散点图和小提琴图（scatter plot violin plot）

科研绘图系列：R语言散点图和小提琴图（scatter plot violin plot）

文章目录 介绍加载R包导入数据数据预处理函数画图系统信息介绍 提取模型的结果并对模型的结果进行可视化。 加载R包 library(ggplot2) library(ggridges) library(patchwork) library(party) library(caret) library(dplyr
阅读更多...
堆的向下调整算法和TOPK问题

堆的向下调整算法和TOPK问题

目录 1.什么是堆&#xff1f; 1.1 向下调整建堆的时间复杂度计算 1.2 堆的结构体设计 2.堆的功能实现&#xff1a; 2.1 堆的插入&#xff1a; 2.2 堆的删除&#xff1a; 2.3 堆排序&#xff1a; 2.4 向下调整建堆&#xff1a; 2.5 TOPK问题&#xff1a; 2.6 向上调整算…
阅读更多...
【Unity踩坑】UI Image的fillAmount不起作用

【Unity踩坑】UI Image的fillAmount不起作用

在游戏场景中&#xff0c;我们经常在界面上展示进度条&#xff0c;当然有各种形状的&#xff0c;线性的&#xff0c;长方形的&#xff0c;圆形&#xff0c;环形等等。 Unity中实现这种效果的话&#xff0c;最基本的方法说是改变Image的fillAmout属性。 如果你是初次使用UI Ima…
阅读更多...
ubuntu安装SFML库+QT使用SFML库播放声音

ubuntu安装SFML库+QT使用SFML库播放声音

(1)ubuntu安装SFML库 sudo apt-get install libsfml-dev (2)QT使用SFML库播放声音 在.pro文件中添加头文件路径和库文件路径 INCLUDEPATH /usr/include/SFML LIBS /usr/lib/x86_64-linux-gnu/libsfml*.so UI界面中创建一个pushbutton按钮&#xff0c;并且创建槽函数 加载…
阅读更多...
国外大带宽服务器怎么连接

国外大带宽服务器怎么连接

随着互联网技术的发展&#xff0c;企业和个人用户越来越依赖于高速的数据传输服务。国外的大带宽服务器因其高速度、稳定性及较低延迟等优势&#xff0c;成为了许多跨国公司、网站托管商以及数据密集型应用的选择。以下是连接国外大带宽服务器的一些常见方法及其注意事项。 选择…
阅读更多...
最新文章

Copyright @ 2022~2023