html布局的常用的四种实现方式_html四种布局-优快云博客

本文链接：https://blog.youkuaiyun.com/always_yang/article/details/106582557

本文详细介绍了HTML中实现三栏布局的四种常见方法：浮动布局、绝对定位、Flex布局和Grid布局。针对每种方法，文章提供了具体的代码实现，并解释了注意事项和渲染效果。对于浮动布局，需注意左右栏的浮动顺序；绝对定位时，利用父级相对定位和子级绝对定位配合调整位置；Flex布局通过设置容器为flex并分配空间；而Grid布局则使用grid-template-columns定义列宽。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应

第一种实现方式：浮动布局

将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况

正常的渲染效果如下所示：


<style type="text/css">
html,body{
padding:0;
margin:0;
}

.container{
padding:0;
margin:0;
width:100%;
height:100px;
}

.container div{
height:100px;
}

.left{
float:left;
width:300px;
background: green;
}

.right{
float:right;
width:300px;
background: blue;
}

.middle{
background: red;
}
</style>


<body>
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
</div>
</body>
</html>

第二种：绝对定位（position:absolute）
设置父盒子position:relative（相对定位），
三个子盒子position：absolute,
左盒子left:0,
右盒子right:0;
中间盒子left:300px;right:300px


<style type="text/css">
html,body{
padding:0;
margin:0;
}

.container{
width:100%;
height:100px;
position:relative;
}

.container div{
height:inherit;
text-align: center;
line-height:100px;
}

.left{
position:absolute;
left:0;
width:300px;
background:blueviolet;
}

.right{
position:absolute;
right:0;
width:300px;
background: yellow;
}

.middle{
position:absolute;
left:300px;
right:300px;
background: gold;
}
</style>

<body>
<div class="container">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class='right'>右边</div>
</div>
</body>

第三种：flex布局
父盒子 display:flex
左右盒子设置宽度：300px
中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩

<style type="text/css">
html,body {
padding: 0;
margin: 0;
}

.container {
width: 100%;
height: 100px;
display: flex;
}

.left {
width: 300px;
background: blueviolet;
}

.right {
width: 300px;
background: yellow;
}

.middle {
flex: 1;
background: gold;
}
</style>


<body>
<div class="container">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class='right'>右边</div>
</div>
</body>

第四种：grid布局
父盒子display: grid;
grid-template-columns:300px auto 300px;(分割成3列，宽度分别为300px auto 300px)
grid-template-rows:100px;(占一行，行高100px)

<style type="text/css">
			html,body {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100%;
				display: grid;
				grid-template-columns:300px auto 300px;
				grid-template-rows:100px;
			}
			
			.left {
				background: blueviolet;
			}
			
			.right {
				background: yellow;
			}
			
			.middle {
				background: gold;
			}
		</style>
<body>
<div class="container">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class='right'>右边</div>
</div>
</body>