程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

flex布局,一行内显示4个元素,超出4个换行,右间距设置

发布于2022-08-03 06:16     阅读(5678)     评论(0)     点赞(13)     收藏(3)


父元素CSS:

.search-wrapper {

  /* flex布局,换行、左对齐 */

  display: flex;

  justify-content: flex-start;

  flex-wrap: wrap;

  margin: 0 40rpx;

  position: absolute;

  top: 240rpx;

  left: 0;

  right: 0;

}

子元素CSS:

.city {

  font-size: 24rpx;

  background: #fff;

  border-radius: 20rpx;

  padding: 2rpx 20rpx;

  /* 每个元素右间距设置为10rpx */

  margin-right: 10rpx;

  /* 计算每个元素的宽度:30rpx是前三个元素的间距(margin-right)和,除以4即为每个元素的宽度 */

  width: calc((100% - 30rpx) / 4);

  word-wrap: break-word;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

/* 将下标是4的倍数元素的margin-right设置为0,即将最后一个元素的margin-right置0 */

.city:nth-of-type(4n+0) {

  margin-right: 0;

}

原文链接:https://blog.csdn.net/crazybai0001/article/details/125582264




所属网站分类: 技术文章 > 博客

作者:加油打工人

链接:http://www.qianduanheidong.com/blog/article/381346/8bd8251e800efd01b87e/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

13 0
收藏该文
已收藏

评论内容:(最多支持255个字符)