CSS让5个20%div排成一行

使用Flex布局解决CSS中元素间距问题

原创已于 2022-12-25 21:31:52 修改 · 910 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2022-12-22 17:50:16 首次发布

本文探讨了在CSS布局中，由于padding和margin导致的元素位置混乱问题，并对比了传统方法与使用Flex布局的解决方案。通过实例展示了如何通过设置`display: flex`来消除边距和内填充的影响，实现更简洁的布局。这种方法简化了CSS计算，提高了代码的可读性和布局的稳定性。

1、有时候，我们在写css样式的时候，会有pading和margin，边框的距离总是让我们的节点跑位了。实在太丑。

<style>
.item2{width:20%;margin:5px;padding:5px;background:#ccc;height:50px;float:left;}
</style>
<br>
20%宽度,受边框影响最后一个div会下沉<br>
<div style="widht:80%;">
<div class="item2">20%宽度</div>
<div class="item2">20%宽度</div>
<div class="item2">20%宽度</div>
<div class="item2">20%宽度</div>
<div class="item2">20%宽度</div>
</div>

变成这样：

2、有的方法通过在css里面进行加减运算，过于复杂了。

通过在父级加display:flex; 就可以无视无视margin和padding。

<style>
.item{width:20%;margin:5px;padding:5px;background:#ccc;height:50px;}
</style>
<br>
20%宽度，无视margin和padding<br>
<div style="widht:80%;display:flex">
<div class="item">20%宽度</div>
<div class="item">20%宽度</div>
<div class="item">20%宽度</div>
<div class="item">20%宽度</div>
<div class="item">20%宽度</div>
</div>