css实现自适应的三栏布局

原创已于 2023-01-01 16:55:39 修改

· 630 阅读

1 ·

版权

文章标签：

#css #css3 #html

于 2022-11-08 09:38:03 首次发布

CSS实现自适应三栏布局

效果如下图
在这里插入图片描述

实现思路

问题：如果将最外层的父div设置为100%，那么三个子div为33.3333%即可实现横向的三栏布局，但是三个子div之间没有间距，不是很美观。但是我们加上间距会发现100%不能够分配给三个子div（三个div不能排列在一行）

🛑方法：在父div与子div之间在加上一层div，我们按照层次由外而内分别叫做div1，div2，div3。div1仍然为100%，div2则设置margin-right: -10px，div3则设置margin-right: 10px。由此，我们将div3的宽度设置为33.333333% - 10px即可以达到理想效果。

关键代码如下

.div1{
    width: 100%;
    overflow: hidden;
}

.div2{
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px
}

.div3{
    width: calc(33.33333% - 10px);
    margin-right: 10px;
    
}

全部代码

<template>
	<div class="div1">
		<div class="div2">
			<div class="div3"></div>
			<div class="div3"></div>
			<div class="div3"></div>
			<div class="div3"></div>
			<div class="div3"></div>
			<div class="div3"></div>
			<div class="div3"></div>
			<div class="div3"></div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.div1{
		width: 100%;
		height: 500px;
		background-color: red;
        overflow: hidden;
		.div2{
			display: flex;
			flex-wrap: wrap;
			margin-right: -10px;
			background-color: mediumpurple;
			.div3{
				width: calc(33.33333% - 10px);
				height: 100px;
				margin-right: 10px;
				margin-top: 10px;
				background-color: greenyellow;
			}
		}
	}
	
</style>