css均分成n列

方式一、float

HTML:

<div class="footer">
	<div class="tab" style="background-color: blue">首页</div>
	<div class="tab" style="background-color: red">缤纷活动</div>
	<div class="tab" style="background-color: green">我的</div>
</div>

CSS: 主要样式：float+width（将每个div都进行左浮，然后宽度计算为1/3即可）

<style lang="less" scoped>
    .footer{
        width: 100%;
        height: 3rem;
        background-color: #ddd;
        position: fixed;
        bottom:0;

        .tab{
            float: left;
            width: calc(100%/3);
            height: 100%;
            text-align: center;
            line-height: 3rem;
        }
    }
</style>

 

方式二、display: inline-block（将div设置为行几块，所以就到一行来了，在设置相等宽度即可）

.tab{
	display: inline-block;
	width: calc(100%/3);
	height: 100%;
	text-align: center;
	line-height: 3rem;
}

 

方式三、flex

CSS: 要现在父元素上添加display:flex表示父元素使用flex这种布局，然后flex:1表示均分(默认是x轴方向，从左到右)(只要每个dic的数字相同就可以，比如flex:2也是一样的效果，我自己测试的效果是这样)

.footer{
	width: 100%;
	height: 3rem;
	background-color: #ddd;
	position: fixed;
	bottom:0;
	display: flex;

	.tab{
		flex: 1;
		height: 100%;
		text-align: center;
		line-height: 3rem;
	}
}

 

方式四、grid（网格布局）

.footer{
    /*网格布局*/
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

指定布局方式display: grid;

grid-template-columns: repeat(3,1fr)  /*将当前footer所在的标签进行列划分，重复3个，每个的比例都是1，所以宽度相同*/