html + css 布局技巧总结 ——多列布局（5）

最新推荐文章于 2024-04-04 05:13:01 发布

前端学习007

最新推荐文章于 2024-04-04 05:13:01 发布

阅读量862

点赞数 2

文章标签：布局 css

本文链接：https://blog.csdn.net/weixin_44433499/article/details/105682953

版权

本文总结了多种实现多列布局的方法，包括使用float和margin、CSS flexbox以及table布局。针对一列不定宽、一列自适应的情况，提供了float+overflow、table和flex的不同解决方案。此外，还探讨了多列等分布局和九宫格布局的实现，通过实例代码详细解析了使用CSS float、table和flexbox创建九宫格的方法。

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

1.两侧定宽，中栏自适应
2. 一列不定宽，一列自适应
3. 多列等分布局
4. 九宫格布局

实现方式：
使用float+margin实现
使用flex实现
使用table实现

使用float+margin实现

.parent {
    
			width: 500px;
			height: 100px;
		}

		.left {
   
			width: 100px;
			height: 100px;
			background-color: #2AC845;
			float: left;
			margin-right: 30px;
		}

        .center {
   
			width: 100%;
			height: 100px;
			float: left;
			margin-right:  -150px;
			background-color:blanchedalmond;
			
		}
		.right {
    
			width: 100px;
			height: 100px;
			background-color:pink;
			float: right;
			margin-right: -250px;
		}

在这里插入图片描述

使用flex实现

代码

.parent {
    
			width: 500px;
			height: 100px;
			display: flex;
		}

		.left {
   
			width: 100px;
			height: 100px;
			background-color: #2AC845;
			
		}

        .center {
   
			flex: 1;
			height: 100px;
			background-color: #007AFF
			
		}
		.right {
    
			width: 100px;
			height: 100px;
			background-color:pink;
			 
		}

在这里插入图片描述
利用table实现布局

.parent {
    
			width: 100%;
			height: 100px;
			display: table;
			table-layout: fixed;
		}

		.left {
   
			width: 100px;
			height: 100px;
			background-color: #2AC845;
			display: table-cell;
		}

        .center {
   
			height: 100px;
			background-color: #007AFF;
			display: table-cell
			
		}
		.right {
    
			width: 100px;
			height: 100px;
			background-color:pink;
		    display: table-cell
		}