Question

我想在these columns之间留出间隔，并在图像中用红笔圈出斑点。

这是我的代码：

.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。

谢谢！

编辑：这是what I want to do的图片。

Answer 1

这是首发：

.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 ，否则您的盒子会在它们具有不同的高度时开始跳动。

Answer 2

您可能需要在其中填充一些内容＆> div {

列框之间的间距？

2 个答案: