html布局的常用的四种实现方式

最新推荐文章于 2024-09-16 06:35:10 发布

always_yang

最新推荐文章于 2024-09-16 06:35:10 发布

阅读量1.8k

点赞数

分类专栏： HTML css

本文链接：https://blog.csdn.net/always_yang/article/details/106582557

版权

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

摘要由CSDN通过智能技术生成

需求：假设高度默认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">左边