时间戳

首页 > 解决方案 > 列框之间的间距？

css - 列框之间的间距？

问题描述

我想在这些列之间放置间距，并且在图像中我用红笔圈出了这些点。

这是我的代码：

.help-icons {
        width: 90%;
        margin-left: 4rem;

        & > div {
            height: 5rem;
            width: 10rem;
            float: left;
            margin-left: 30px;
        }
    }
.help-icons
        .icon-one
            span.wfs-pie-chart
            p.dark-text Lorem ipsum dolor sit amet
            p.light-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        .icon-two
            span.wfs-user
            p.dark-text Lorem ipsum dolor sit amet
            p.light-text Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.
        .icon-three
            span.wfs-git-branch
            p.dark-text Lorem ipsum dolor sit amet
            p.light-text Mauris nunc congue nisi vitae suscipit tellus mauris a diam.
        .icon-four
            span.wfs-database
            p.dark-text Lorem ipsum dolor sit amet
            p.light-text Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum.
        .icon-five
            span.wfs-trending-up
            p.dark-text Lorem ipsum dolor sit amet
            p.light-text Egestas sed sed risus pretium quam vulputate dignissim suspendisse in.
        .icon-six
            span.wfs-cloud
            p.dark-text Lorem ipsum dolor sit amet
            p.light-text Proin fermentum leo vel orci porta non pulvinar neque laoreet.

我使用 Pug 而不是 HTML 和 Sass 而不是 CSS。

谢谢！

编辑：这是我想要做的图像。

标签： csssass

解决方案

这是一个启动器：

.help-icons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  > div {
    flex: 0 0 calc(33.33% - 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-bottom: 1rem;
    padding: 1rem;
    > span {
      width: 4rem;
      height: 4rem;
      display: inline-block;
      border-radius: 2rem;
      color: white;
      font-size: 2.4rem;
    }
    .dark-text {
      font-size: 1.8rem;
    }
  }
}

最重要的是，不要使用float这种布局，否则你的盒子会在它们具有不同高度的那一刻开始跳跃。

推荐阅读