欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

实现三列布局的三种方法

程序员文章站 2022-06-08 16:30:30
...

1.绝对定位

<div class="containt">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
	
			.containt{
				background: lightcoral;
			}
			.left{
				position: absolute;
				width: 200px;
				height: 400px;
				top: 0;
				left: 0;
				background: lightblue;
			
			}
			.right{
				position: absolute;
				width: 200px;
				height: 400px;
				right: 0;
				top: 0;
				background: lightcyan;
			}
			.center{
				height: 400px;
				margin: 0 200px 0 200px;
				background:lightpink;
			}

实现三列布局的三种方法

2.float
x需要注意的是,因为浮动会使元素脱离文档流,所以我们需要将中间的元素放在html结构的最后,以免右侧的内容沉在中间内容的下面

<div class="wrap">
			<div class="left">左侧</div>
			<div class="right">右侧</div>
			<!--必须将中间内容写在html结构的最后,否则右侧会沉在中间内容的下侧-->
			<div class="middle">中间</div>
		</div>
.wrap {
				background: #eee;
				overflow: hidden;
				padding: 20px;
			}
			
			.left {
				width: 300px;
				height: 200px;
				float: left;
				background: red;
			}
			
			.right {
				width: 220px;
				height: 200px;
				float: right;
				background: lightblue;
			}
			
			.middle {
				margin-left: 320px;
				background: lightpink;
				margin-right: 240px;
				height: 200px;
			}

实现三列布局的三种方法

3.flex布局

<div class="contain">
			<div class="left">左侧</div>
			<div class="center">中间</div>
			<div class="right">右侧</div>
		</div>
.contain{
				display: flex;
				justify-content: space-between;
			}
			.left,.right,.center{
				height: 100px;
			}
			.left{
				width: 200px;
				background:lightblue;
			}
			.right{
				width: 200px;
				background: lightcoral;
			}
			.center{
				width: 100%;
				margin: 0 20px;
				background: lightgrey;
			}

实现三列布局的三种方法