【应用】两列布局 - 左边固定宽度，右边自适应

最新推荐文章于 2022-09-01 21:22:57 发布

Dora_5537

最新推荐文章于 2022-09-01 21:22:57 发布

阅读量233

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/dora_5537/article/details/102145985

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、Flex 布局

<!DOCTYPE html>
<html>
<head>
	<title>两列布局-左边固定宽度，右边自适应</title>
	<style>
		html,body{
			margin: 0;
			padding: 0;
		}
		#main{
			width: 100%;
			border: 1px solid red;
			display: flex;
			justify-content: space-between;
		}
		#left{
			width:200px;
			background: yellow;
		}
		#right{
			background:rgb(0, 255, 34);
			flex: auto;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="left">左</div>
		<div id="right">右</div>
	</div>	
	<script>

	</script>
</body>
</html>

说明：

1. 两列等宽：

#left{
    background: yellow;
    flex:0 0 50%;
}
#right{
    background:rgb(0, 255, 34);
    flex:0 0 50%;
}

二、绝对定位

<!DOCTYPE html>
<html>
<head>
	<title>两列布局-左边固定宽度，右边自适应</title>
	<style>
		html,body{
			margin: 0;
			padding: 0;
		}
		#main{
			width: 100%;
			border: 1px solid red;
			position: relative;
		}
		#left{
			width:200px;
			background: yellow;
			position: absolute;
			left: 0;
			top: 0;
		}
		#right{
			background:rgb(0, 255, 34);
			margin-left:200px;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="left">左</div>
		<div id="right">右</div>
	</div>	
	<script>

	</script>
</body>
</html>

说明：

1. 两列等宽：

// #left
width:50%;
// #right
margin-left:50%;

三、浮动元素

<!DOCTYPE html>
<html>
<head>
	<title>两列布局-左边固定宽度，右边自适应</title>
	<style>
		html,body{
			margin: 0;
			padding: 0;
		}
		#main{
			width: 100%;
			border: 1px solid red;
			overflow: hidden;
		}
		#left{
			width:200px;
			background: yellow;
			float: left;
			padding-bottom: 9999px;
			margin-bottom: -9999px;
		}
		#right{
			background:rgb(0, 255, 34);
			margin-left:200px;
			padding-bottom: 9999px;
			margin-bottom: -9999px;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="left">左</div>
		<div id="right">右</div>
	</div>
	<script>

	</script>
</body>
</html>

说明：

1. 当左边浮动元素的高度大于右边的高度时，会出现以下情况：

此时，需要给 right 设置如下CSS样式：

padding-bottom: 9999px;
margin-bottom: -9999px;

2. 当右边的高度大于左边浮动元素的高度时，会出现以下情况：

此时，需要给 right 设置如下CSS样式：

margin-left: 200px;

但还会出现以下情况：

此时，需要给 left 设置如下CSS样式：

padding-bottom: 9999px;
margin-bottom: -9999px;

3. 当内容长度多余宽度时，会自动换到下一行。

4. 两列等宽：

// 修改1：#left
width:50%;
// 修改2：#right
margin-left:50%;

实现两列等宽的第四种方法：inline-block

<!DOCTYPE html>
<html>
<head>
	<title>两列布局-两列等宽均分宽度,高度一致</title>
	<style>
		html,body{
			margin: 0;
			padding: 0;
		}
		#main{
			width: 100%;
			border: 1px solid red;
			font-size: 0;
		}
		#left{
			width:50%;
			background: yellow;
			display: inline-block;
			font-size: 12px;
			
		}
		#right{
			width:50%;
			background:rgb(0, 255, 34);
			display: inline-block;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="left">左</div>
		<div id="right">右</div>
	</div>	
	<script>

	</script>
</body>
</html>

Dora_5537

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【应用】两列布局 - 左边固定宽度，右边自适应

一、Flex 布局<!DOCTYPE html><html><head> <title>两列布局-左边固定宽度，右边自适应</title> <style> html,body{ margin: 0; padding: 0; } #main{ width: 100%; borde...
复制链接

扫一扫