首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS实现两列布局的N种方法

Posted in HTML / CSS onAugust 02, 2021

一、什么是两列布局

两列布局分为两种，一种是左侧定宽、右侧自适应，另一种是两列都自适应（即左侧宽度由子元素决定，右侧补齐剩余空间）。在css面试题里面属于常考题，也是一个前端开发工程师必须掌握的技能，下面将分别介绍实现方式。

二、左侧定宽、右侧自适应如何实现？

1.双inline-block

原理：两个元素都设置dislpay:inline-block，为了消除html空格的影响，父元素的font-size需要设置为0，右侧自适应元素的宽度使用calc函数计算。如果两个元素的高度不一样，可以给元素设置vertical-align:top调整。

缺点：由于父元素设置了font-size为0，子元素内文字不会显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		   *{
			   padding: 0;
			   margin: 0;
		   }
			.box{
				height: 600px;
				width: 100%;
				font-size:0;
			}
			.left{
				display: inline-block;
				width: 100px;
				height: 200px;
				background-color: red;
				vertical-align: top;
				
			}
			.right{
				display: inline-block;
				width: calc(100% - 100px);
				height: 400px;
				background-color: blue;
				vertical-align: top;
			}
			
		</style>
	</head>
	<body>
		<div>
			<div>
				<span>1234</span>
			</div>
			<div>
				<span>1234</span>
			</div>
		</div>
	</body>
</html>

2.双浮动

原理：两个元素设置浮动，右侧自适应元素宽度使用calc函数计算

缺点：父元素需要清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;

			}
			.left{
				float: left;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				float: left;
				width: calc(100% - 100px);
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<span>
					123adadadddddddddddddddddddddddddddddddddddddddd
				</span>
			</div>
			<div></div>
		</div>
	</body>
</html>

原理：左侧定宽元素浮动，右侧自适应元素设置margin-left的值大于定宽元素的宽度即可

缺点：父元素需要清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;

			}
			.left{
				float: left;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				margin-left: 100px;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<p>1234</p>
			</div>
			<div>
				<p>1234</p>
			</div>
		</div>
	</body>
</html>

4.浮动+BFC

原理：父元素设置overflow:hidden,左侧定宽元素浮动，右侧自适应元素设置overflow:auto创建BFC

缺点：左侧元素的内容如果超过设定宽度会重叠到右侧元素上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;
				overflow: hidden;
			}
			.left{
				float: left;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				overflow: auto;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>111111111111111111111111</div>
			<div>111111111111111111111111111111111111111111111</div>
		</div>
		<div></div>
	</body>
</html>

5.absolute+margin-left

原理：父元素相对定位，左侧元素绝对定位，右侧自适应元素设置margin-left的值大于定宽元素的宽度

缺点：父元素设置了相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;
				position: relative;
			}
			.left{
				position: absolute;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				margin-left: 100px;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

6.flex布局

原理：父元素设置display：flex，自适应元素设置flex：1

缺点：存在兼容性问题，IE10以下不支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;
				display: flex;
			}
			.left{
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				flex: 1;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

三、左右两侧元素都自适应

严格来讲，并不算两个元素都是自适应，只是将上面的定宽改为由子元素撑开而已

1.浮动+BFC

原理和上面一样，只是左侧元素的宽度没有设置，由子元素撑开

2.table布局

原理：父元素display:table,左侧元素外围用一个div包裹，该div设置display:table-cell，width:0.1%（保证最小宽度），左侧元素内部设置margin-right，右侧元素设置display:table-cell。

缺点：IE7及以下不支持，当display:table时，padding失效，父元素的line-height属性失效，当display:table-cell时，margin失效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{
				display: table;
				width: 100%;
				
			}
			.box{
				display: table-cell;
				width: 0.1%;
			}
			.left{
				margin-right: 20px;
				background-color: red;
				height: 200px;
			}    
			.right{
				display: table-cell;
				background-color: blue;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>126545453dddddddd453453453</div>
			</div>
			<div>12121</div>
		</div>
	</body>
</html>

3.flex布局

原理、缺点同上面的flex布局

4.grid布局

原理：父元素设置display：grid，grid-template-columns:auto 1fr;（这个属性定义列宽，auto关键字表示由浏览器自己决定长度。fr是一个相对尺寸单位，表示剩余空间做等分）grid-gap:20px（行间距）

缺点：兼容性太差，IE11都不支持，谷歌57以上才可以

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{
				display:grid;
				grid-template-columns:auto 1fr;
				grid-gap:20px
			}  
			.left{
				background-color: red;
				height: 200px;
			}
			.right{
				height:300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>1111111111111111111111111</div>
			<div></div>
		</div>
	</body>
</html>

到此这篇关于CSS实现两列布局的N种方法的文章就介绍到这了,更多相关css两列布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

 

CSS实现两列布局的N种方法

- Author -

笑人

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 #HTML / CSS
纯html+css实现打字效果
html form表单基础入门案例讲解
Jul 21 #HTML / CSS
带你了解CSS基础知识,样式
Jul 21 #HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 #HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
html5实现点击弹出图片功能
Jul 16 #HTML / CSS
win11(40) React(6) i5 10400(1) i5 9400(1) i7 6700(1) GTX1660(1) Tomcat(18) ipad(1) 速龙(1) win10(43)
You might like
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
jQuery操作表格（table）的常用方法、技巧汇总
2014/04/12 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
浅谈jQuery中replace()方法
2015/05/13 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
详解ionic本地相册、拍照、裁剪、上传（单图完全版）
2017/10/10 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
python二分法实现实例
2013/11/21 Python
Django与JS交互的示例代码
2017/08/23 Python
Python实现感知机（PLA）算法
2017/12/20 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
环境科学专业研究生求职信
2013/10/02 职场文书
师范毕业生自荐信
2013/10/17 职场文书
汽车检测与维修专业求职信
2013/10/30 职场文书
应用心理学个人的求职信
2013/12/08 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书