加载中...
PAGE

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

Post on 2021-10-27 101 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 INSERT SELECT FROM 语句的使用

mysql INSERT SELECT FROM 语句的使用

阅读更多

暂无评论

    发表评论
    返回顶部
    X