CSS的双列自适应布局如何实现？附源码

2021-05-31 10:37:20 浏览数 (3821)

双列布局是页面布局中最常见的一种，采用双列布局的好处很多，比如页面简洁、网站内容明确、用户体验度好等。那么今天这篇文章，w3cschool 小编来为大家介绍下 CSS 的双列自适应布局如何实现？附源码

什么是双列自适应布局？

双列自适应布局是指一部分由内容的宽度撑开，剩余的另一列则是自动变换宽度。实现双列自适应布局的方式总共有三种，下文为大家一一介绍。

float+overflow：hidden 实现双列自适应布局

该种方法主要是通过​overflow:hidden​触发了 BFC（一种 CSS 渲染模式，是指一个独立的渲染区域或者一个隔离的独立容器）。BFC 的一个特性就是不重叠浮动元素。

实现源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS实现双列自适应布局 - 编程狮(w3cschool.cn)</title>
	<style type="text/css">
		#left{
			width: 200px;
			height: 300px;
			float: left;
			background-color: red;
		}
		#right{
			height: 300px;
			background-color: blue;
			overflow:hidden;
			zoom:1;
		}
	</style>
</head>
<body>
	<div>
		<div id="left"></div>
		<div id="right"></div>
	</div>
</body>
</html>

实现效果：

CSS实现自适应书双列布局

使用 flex 布局

flex 布局也叫弹性盒子布局，用它来实现双列自适应布局的方式很简单。我们只需要在最外层盒子上加上该属性即可。实现效果如上图，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS实现双列自适应布局 - 编程狮(w3cschool.cn)</title>
	<style type="text/css">
		#big{
			display: flex;
		}
		#left{
			width: 200px;
			height: 300px;
			float: left;
			background-color: red;
		}
		#right{
			height: 300px;
			background-color: blue;
			flex: 1;
		}
	</style>
</head>
<body>
	<div id="big">
		<div id="left"></div>
		<div id="right"></div>
	</div>
</body>
</html>

使用 grid 布局实现

grid 布局，它是一个基于网格的二维布局系统，可以用来优化用户界面设计。实现效果通上，具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS实现双列自适应布局 - 编程狮(w3cschool.cn)</title>
	<style type="text/css">
		#big{
			display: grid;
			grid-template-columns: auto 1fr;
		}
		#left{
			width: 200px;
			height: 300px;
			float: left;
			background-color: red;
		}
		#right{
			height: 300px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div id="big">
		<div id="left"></div>
		<div id="right"></div>
	</div>
</body>
</html>

以上就是文章“CSS 的双列自适应布局如何实现？附源码”的全部内容。想要了解更多页面布局请前往 w3cschool。