【总结】:CSS常用的两栏布局方法(最全面)

2023-10-13 09:20

本文主要是介绍【总结】:CSS常用的两栏布局方法(最全面),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 一、CSS两栏布局(左列定宽,右列自适应宽)
      • 方法一:浮动+margin
      • 方法二:定位+margin
      • 方法三:浮动+BFC
      • 方法四:flex布局
      • 方法五:able布局
  • 二、CSS两栏布局(左列不定宽,右列自适应宽)


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

最终效果:
在这里插入图片描述

方法一:浮动+margin

HTML:

<div class="container"><div class="left">定宽</div><div class="right">自适应</div>
</div>

CSS:

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

方法二:定位+margin

HTML不变
CSS:

/* 不给高度不行,不给宽度可以自适应 */
.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

HTML不变
CSS:

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

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

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


方法四:flex布局

HTML不变
CSS:

.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布局

HTML不变
CSS:

/* 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常用的两栏布局方法(最全面)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/202216

相关文章

Nginx安全防护的多种方法

《Nginx安全防护的多种方法》在生产环境中,需要隐藏Nginx的版本号,以避免泄漏Nginx的版本,使攻击者不能针对特定版本进行攻击,下面就来介绍一下Nginx安全防护的方法,感兴趣的可以了解一下... 目录核心安全配置1.编译安装 Nginx2.隐藏版本号3.限制危险请求方法4.请求限制(CC攻击防御)

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

MySQL深分页进行性能优化的常见方法

《MySQL深分页进行性能优化的常见方法》在Web应用中,分页查询是数据库操作中的常见需求,然而,在面对大型数据集时,深分页(deeppagination)却成为了性能优化的一个挑战,在本文中,我们将... 目录引言:深分页,真的只是“翻页慢”那么简单吗?一、背景介绍二、深分页的性能问题三、业务场景分析四、

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

全面掌握 SQL 中的 DATEDIFF函数及用法最佳实践

《全面掌握SQL中的DATEDIFF函数及用法最佳实践》本文解析DATEDIFF在不同数据库中的差异,强调其边界计算原理,探讨应用场景及陷阱,推荐根据需求选择TIMESTAMPDIFF或inte... 目录1. 核心概念:DATEDIFF 究竟在计算什么?2. 主流数据库中的 DATEDIFF 实现2.1

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

Java 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载(Overload)详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I