Как убрать пробел во втором столбце CSS-сетки? - PullRequest
Новая
       9

Как убрать пробел во втором столбце CSS-сетки?

0 голосов
/ 19 сентября 2018

У меня проблемы с моей простой колонкой CSS.Вот как это выглядит:

enter image description here

HTML: 

<div class="catalogue-container">

    <div class="catalogue-item">
        <img src="blabla.jpg" />
    </div>

    <div class="catalogue-item">
        <img src="blabla2.jpg" />
    </div>

    <div class="catalogue-item">
        <img src="blabla3.jpg" />
    </div>

    <div class="catalogue-item">
        <img src="blabl4.jpg" />
    </div>

</div>

CSS: 

.catalogue-container {
    -webkit-column-count: 2;
    -webkit-column-gap: 7px;
    column-count: 2;
    column-gap: 7px;
    width: 100%;
    margin: 0 auto;
}

.catalogue-item {
    margin-bottom: 7px;
    padding: 0;
}

Myссылка: https://codepen.io/gsarig/pen/iqhfl

Я хочу убрать пробел и переместить элементы из второго столбца наверх.

Я что-то здесь упускаю?Любая помощь будет высоко ценится.

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Проблема может быть вызвана переносом div при использовании столбца, вы можете попробовать добавить display: inline-block к .catalogue-item, чтобы избежать этого.

Попробуйте выполнить следующее с & без display: inline-block: 

.catalogue-container {
  -webkit-column-count: 2;
  -webkit-column-gap: 7px;
  column-count: 2;
  column-gap: 7px;
  width: 100%;
  margin: 0 auto;
}

.catalogue-item {
  margin-bottom: 7px;
  padding: 0;
  border:1px solid black;
  display: inline-block;
  width: 100%;
}
<div class="catalogue-container">

  <div class="catalogue-item">
    <img src="blabla.jpg" style="height: 300px; display: block;"/>
  </div>

  <div class="catalogue-item">
    <img src="blabla2.jpg" style="height: 190px; display: block;"/>
  </div>

  <div class="catalogue-item">
    <img src="blabla3.jpg" style="height: 200px; display: block;"/>
  </div>

  <div class="catalogue-item">
    <img src="blabl4.jpg" style="height: 250px; display: block;"/>
  </div>

</div>
0 голосов
/ 19 сентября 2018

Возможно, стоит изучить flexbox: 

.catalogue-container {
   display: flex;
   flex-direction:column;
}

https://css -tricks.com / snippets / css / a-guide-to-flexbox /

...