css 分成三等分

CSS是网页设计中不可或缺的重要组成部分，它可以帮助我们实现各种效果，比如今天要讨论的分成三等分的效果。

.container{
        display: flex;
        justify-content: space-between;
        width: 100%;
}
.item{
        width: 33.33%;
}

要实现将一个容器分成三等分，我们可以先将这个容器的display设置为flex，这样子里面的子元素就会排成一行。接着，设置justify-content属性为space-between，这样子就可以让三个子元素占据整个容器的宽度。最后，设置子元素的宽度为33.33%即可实现三等分。

此外，我们还可以通过设置子元素的margin值来为每个子元素之间添加间距。比如我们可以把它们之间的宽度设置为10px:

.item{
        width: 33.33%;
        margin-right: 10px;
}
.item:last-child{
        margin-right: 0;
}
    

这里的:last-child是表示选择最后一个子元素，并将最后一个子元素的margin-right值设置为0，这样子就不会造成间距的重复。

总之，这是一个实现将一个容器分成三等分的简单方法，你可以根据实际需求调整容器和子元素的样式，来实现不同的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！