Расстояние между колонками? - PullRequest
0 голосов
/ 21 декабря 2018

Я хочу поставить интервал между этими столбцами , и на изображении я обведил точки красной ручкой.

Вот мой код:

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

Спасибо!

РЕДАКТИРОВАТЬ: Вот изображение что я хочу сделать .

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Вот стартер:

.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 для этого макета , иначе ваши ящики начнут прыгать вокруг, когда они имеют разную высоту.

0 голосов
/ 21 декабря 2018

Возможно, вам понадобится добавить отступ для &> div {

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...