CSS中如何均匀分配距离 CSS中通过各种属性来控制元素之间的间距,常用的方法有margin和padding。如果需要均匀分配距离,可以使用flex布局、grid布局或者calc()函数来实现。 使用
html <div class="container"> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> </div>
css .container { display: flex; justify-content: space-between; }
html <div class="container"> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> </div>
css .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }
html <div class="container"> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> </div>
css .container { width: 100%; } .box { width: calc((100% - 40px) / 3); margin-right: 20px; } .box:last-child { margin-right: 0; }
粉丝
0
关注
0
收藏
0