当前位置: 首页 > news >正文

CSS 两栏布局

目录

CSS两栏布局(左列定宽,右列自适应宽)

方法一:浮动+margin

方法二:定位+margin

方法三:浮动+BFC

方法四:Flex布局

方法五:able布局

CSS两栏布局(左列不定宽,右列自适应宽)


CSS两栏布局(左列定宽,右列自适应宽)

方法一:浮动+margin

<div class="container"><div class="left">定宽</div><div class="right">自适应</div>
</div><style>/* 不给高度不行,不给宽度可以自适应 */
.container {height: 300px;
}
.left {float: left;/* 定宽 */width: 200px;height: 100%;background-color:chartreuse;
}.right {/* 不设置宽度自适应 */height: 100%;background-color:coral;margin-left: 200px;
}</style>

方法二:定位+margin

html不变

/* 不给高度不行,不给宽度可以自适应 */
.container {position: relative;height: 300px;
}
.left {position: absolute;left: 0;/* 定宽 */width: 200px;height: 100%;background-color:chartreuse;
}.right {/* 不设置宽度自适应 */height: 100%;/* 方法一:margin-left: 200px(只设置边距也可以实现) *//* 方法二:定位*/position:absolute;left: 200px;right: 0;  /*不设置这个,宽度会缩在一起,不自适应展开*/background-color:coral;
}

方法三:浮动+BFC

.container {height: 300px;
}
.left {float: left;/* 定宽 */width: 200px;height: 100%;background-color: chartreuse;
}
.right {/* 不设置宽度自适应 */height: 100%;overflow: hidden;  /*触发BFC条件*/background-color: coral;
}

原理:给正常元素添加BFC属性,正常元素就不会被遮挡,且环绕浮动元素排开。

以上脱离文档流的方式(如浮动、定位),他们的大体思路都是: 先让左定宽元素脱离文档流,这样可以右列正常能够与左列脱离文档流的元素“站成一排”,此时左列元素还覆盖着右列元素,最后,我们只需要调整一下右列元素的外边距啊、定位啊什么的就可以完成

方法四:Flex布局

.container {display: flex;height: 300px;
}
.left {/* 定宽 */width: 200px;/*height: 100% 因为未脱离文档流,所以不用设置高度也行*/background-color: chartreuse;
}
.right {/* flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 */flex: 1;/*height: 100% 因为未脱离文档流,所以不用设置高度也行*/background-color:coral;
}

方法五:able布局

/* table布局:(display:table-cell后)子级容器默认是自动平分宽度沾满父级容器; */
.container {display: table;height: 300px;width: 100%;
}
.left {display: table-cell;/* 定宽 */width: 200px;/*height: 100% 因为未脱离文档流,所以不用设置高度也行*/background-color: chartreuse;
}
.right {/*height: 100% 因为未脱离文档流,所以不用设置高度也行*/display: table-cell;background-color: coral;
}

table布局只需要给父元素添加display:table属性,以及给两个子元素添加 display: table-cell属性即可

CSS两栏布局(左列不定宽,右列自适应宽)

  • 方法一:flex
  • 方法二:浮动+BFC

因为操作方式如上面演示一样,只是去掉左列宽度属性而已,因此就不一一赘述列举了。
操作方式:去掉左列宽度,左列的宽度根据内容进行自适应,从而实现“左列不定宽,右列自适应宽”的效果。

为什么只有这两种方式可以实现?

因为其他方式都是脱离文档流的方式(如:浮动、定位),内部元素无法撑开脱离文档流的盒子。

相关文章:

CSS 两栏布局

目录 CSS两栏布局&#xff08;左列定宽&#xff0c;右列自适应宽&#xff09; 方法一&#xff1a;浮动margin 方法二&#xff1a;定位margin 方法三&#xff1a;浮动BFC 方法四&#xff1a;Flex布局 方法五&#xff1a;able布局 CSS两栏布局&#xff08;左列不定宽&#…...

RHCSA常用命令总结

RHCSA回顾 1.Linux学习环境的安装部署 VMware虚拟机rhel9.x 磁盘容量&#xff1a;20GB cpu:1颗2核心 内存&#xff1a;2G 网卡&#xff1a;NAT 新CD/DVD设置镜像源文件 取消显示器的3d支持 &#xff08;1&#xff09;安装RHEL9 (2)组件&#xff1a;带有GUI的服务器 (3)分区…...

【Spring Boot】详解restful api

目录 1.restful api 1.1.历史 1.2.内容 1.3.传参 2.Spring Boot中的Restful Api 1.restful api 1.1.历史 RESTful API&#xff08;Representational State Transferful Application Programming Interface&#xff09;是一种设计风格&#xff0c;用于构建基于网络的应用…...

LISTAGG 函数

# LISTAGG 函数 对于查询中的每个组&#xff0c;LISTAGG 聚合函数根据 ORDER BY 表达式对该组的行进行排序&#xff0c;然后将值串联成一个字符串。 ## 语法: sql LISTAGG( [DISTINCT] aggregate_expression [, delimiter ] ) [ WITHIN GROUP (ORDER BY order_list) ] …...

485modbus转profinet网关连三菱变频器modbus通讯配置案例

本案例介绍了如何通过485modbus转profinet网关连接威纶通与三菱变频器进行modbus通讯。485modbus转profinet网关提供了可靠的连接方式&#xff0c;使用户能够轻松地将不同类型的设备连接到同一网络中。通过使用这种网关&#xff0c;用户可以有效地管理和监控设备&#xff0c;从…...

1024节日

程序员节日...

【@EnableWebMvc的原理】

用途 启用SpringMvc 的 Java 配置类&#xff0c;代替 xml 格式的配置文件。 一、查看运用&#xff08;注解 EnableWebMvc &#xff0c;实现 WebMvcConfigurer &#xff09; Component("com.ibicd") EnableWebMvc public class AppConfig implements WebMvcConfigu…...

css3 2d转换transform详细解析与代码实例transform

CSS3 Transform是CSS3的一个模块&#xff0c;其目的是为了通过对元素的变形、旋转、缩放、平移等操作&#xff0c;能够更加丰富的展示页面效果。下面是CSS3 Transform的详细解析与代码实例&#xff1a; transform属性 transform属性用于对元素进行变形操作&#xff0c;其属性…...

点亮现代编程语言的男人——C语言/UNIX之父Dennis Ritchie

祝各位程序员们1024程序员节快乐&#x1f389;&#x1f389;&#x1f389; 图片来自网络&#xff0c;侵删 前言 在程序员中&#xff0c;有一位人物的不被人熟知&#xff0c;他的贡献甚至比他自身更要出名 C语言之父&#xff0c;UNIX之父——Dennis MacAlistair Ritchie 一…...

找不到msvcp100.dll解决教程

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“msvcp100.dll丢失”。这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题&#xff0c;本文将介绍四个修复msvcp100.dll丢失的方法&#xff0c;帮助读者快速恢复计算机的正常运…...

萃取和constexpr

最近重温了一下萃取发现其与constexpr有相似之处&#xff0c;记录如下。 一、引出萃取 STL的在中心思想是将容器和算法分开&#xff0c;再通过迭代器iterator这一迭代器来将两者粘合起来。 通过迭代器进行算法计算&#xff0c;需要涉及两个问题&#xff1a; 问题一.通常需要…...

决策树完成图片分类任务

数据集要求&#xff1a; 训练集 和 验证集 &#xff08;要求分好&#xff09; 图片放置规则 &#xff1a; 一个总文件夹 放类别名称的子文件夹 其中子文件夹 为存放同一类别图片 举个例子 分类动物 则 总文件夹名称为动物 子文件夹为 猫 狗 猪猪 。。。 其中猫的文件夹里面…...

Docker 容器全部停止命令

Docker是一个开源的容器化平台&#xff0c;它可以帮助开发者快速构建、部署和运行应用程序。在使用Docker时&#xff0c;我们通常会创建多个容器来运行不同的服务或应用。当我们需要停止所有的容器时&#xff0c;可以使用一些命令来实现。本文将介绍几种常见的停止所有Docker容…...

对GRUB和initramfs的小探究

竞赛时对操作系统启动过程产生了些疑问&#xff0c;于是问题导向地浅浅探究了下GRUB和initramfs相关机制&#xff0c;相关笔记先放在这里了。 内核启动流程 在传统的BIOS系统中&#xff0c;计算机具体的启动流程如下&#xff1a; 电源启动&#xff1a;当计算机的电源打开时&…...

springboo单机多线程高并发防止重复消费的redis方案

springboo单机多线程高并发防止重复消费的redis方案 仅提供方案与测试。 想法&#xff1a;第一次收到userCode时&#xff0c;检查是否在redis中有&#xff0c;如果有&#xff0c;就表明已经消费了&#xff0c;返回抢单失败&#xff1b;否则&#xff0c;就去消费&#xff0c;顺…...

Java架构师内功数据库

目录 1 导学2 数据库基本概念2.1 数据库系统2.2 三级模式-两级映像2.3 数据库设计2.4 数据模型2.4.1 E-R模型2.4.2 关系模型2.5 关系代数3 规范化和并发控制3.1 函数依赖3.2 键与约束3.3 范式3.3.1 第一范式1NF3.3.2 第二范式3.3.3 第三范式3.4 模式分解3.5 并发控制3.6 封锁协…...

踩着节日的小尾巴

节日快乐...

UG\NX二次开发 设置视图中心 UF_VIEW_set_center

文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 感谢粉丝订阅 感谢 a1794902437 订阅本专栏,非常感谢。 简介 UG\NX二次开发 设置视图中心 UF_VIEW_set_center。如果视图NULL_TAG,则使用工作视图。 效果 代码 #include &qu…...

leetcode做题笔记201. 数字范围按位与

给你两个整数 left 和 right &#xff0c;表示区间 [left, right] &#xff0c;返回此区间内所有数字 按位与 的结果&#xff08;包含 left 、right 端点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;left 5, right 7 输出&#xff1a;4示例 2&#xff1a; 输入&…...

游戏盾如何有效防护DDoS

从进入计算机时代以来&#xff0c;DDoS攻击一直是网络世界中的一大威胁&#xff0c;让无数服务陷入瘫痪。这种攻击的原理非常简单&#xff1a;攻击者使用大量的僵尸主机或蠕虫病毒&#xff0c;向目标服务器发送海量请求&#xff0c;迅速耗尽服务器的资源&#xff0c;使其无法继…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...