加载中...
PAGE

css 去掉列表中每一行最后一个元素的外边距或属性

Post on 2021-10-27 12 0

css 去掉列表中每一行最后一个元素的外边距或属性
在这里插入图片描述
设定外框的宽度为180px
内部的每个tag宽度34px右边距为12px并列排列后,一行够排列3个
我们计算一下剩余的宽度:
180-(34+12)*3 = 42
最终得出剩余宽度为42很显然,其实如果最右边的tag的右边距为空,他就可以变成4个一排了
看一下我们现在的代码:

<div class="content"> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> </div>
.content{ margin-top: 50px; margin-left: 50px; width: 180px; border:1px solid red; display: flex; flex-wrap: wrap; } .tag{ width: 34px; height: 40px; margin-bottom: 10px; margin-right: 12px; background-color:yellow; }

我这里提供一个解决的思路,就是在中间加一层用来撑开宽度的div,先看看效果实现
在这里插入图片描述

可以看到多了一个边框为蓝色的块,并且,排列变成了4个一排,来看一下代码

<div class="content"> <div class="blocks"> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> <span class="tag">内容</span> </div> </div>
.content{ margin-top: 50px; margin-left: 50px; width: 180px; border:1px solid red; } .tag{ width: 34px; height: 40px; margin-bottom: 10px; margin-right: 12px; background-color:yellow; } .blocks{ width: calc(100% + 12px); display: flex; flex-wrap: wrap; border:1px solid blue; }

多加了一个blocks的块,并且弹性布局也移动了进去(为了正常展示排列换行)
最主要的是使用width: calc(100% + 12px)来设置宽度,多层开了12px(就是每个tag的右边距)

这样就完美达到了效果
如果我们将右边距改成对应的左边距,就可以实现,每次换行之后,第一个tag永远是贴紧最左边的
在这里插入图片描述

... .tag{ width: 34px; height: 40px; margin-bottom: 10px; margin-left: 12px; background-color:yellow; } .blocks{ width: calc(100% + 12px); margin-left: -12px; display: flex; flex-wrap: wrap; border:1px solid blue; }

第一次发现这种方法,感觉特别神奇,哈哈哈,这可能就是一种技巧了

ubuntu16.04 mysql 设置权限 ERROR 1290(HY000)

ubuntu16.04 mysql 设置权限 ERROR 1290(HY000)

阅读更多
WebSocket code 200 报错

WebSocket code 200 报错

阅读更多
mysql 树目录查询语句优化,提高查询效率

mysql 树目录查询语句优化,提高查询效率

阅读更多

暂无评论

    发表评论
    返回顶部
    X