Как скрыть первый элемент в счетчике столбцов, не пропуская первый столбец? - PullRequest
Новая
       5

Как скрыть первый элемент в счетчике столбцов, не пропуская первый столбец?

0 голосов
/ 18 апреля 2020

Я использую скрипт, чтобы получить все изображения из поста и поместить их в DIV. Я оформляю это с column-count: 3. Затем я использую :first-of-type { display:none }, чтобы скрыть первое изображение. Однако при этом фактически скрывается первый столбец или происходит свертывание первого столбца, даже если в первом столбце есть другие изображения. 

.gallery-masonry { column-count: 3; column-gap: 1rem; }
.gallery-masonry img { width: 100% !important; height: auto !important; margin: 0 0 1rem 0; }
.gallery-masonry img:first-of-type { display: none; }
<div class="gallery-masonry">
     <img src="xxxxx"/>
     <img src="xxxxx"/>
     <img src="xxxxx"/>
     <img src="xxxxx"/>
     <img src="xxxxx"/>
</div>

Есть ли способ это исправить?

1 Ответ

0 голосов
/ 18 апреля 2020

Вы можете использовать visibility: hidden; вместо. 

.gallery-masonry { column-count: 3; column-gap: 1rem; }
.gallery-masonry img { width: 100% !important; height: auto !important; margin: 0 0 1rem 0; }
.gallery-masonry img:first-of-type { visibility: hidden; }
<div class="gallery-masonry">
     <img src="https://via.placeholder.com/150?text=1"/>
     <img src="https://via.placeholder.com/150?text=2"/>
     <img src="https://via.placeholder.com/150?text=3"/>
     <img src="https://via.placeholder.com/150?text=4"/>
     <img src="https://via.placeholder.com/150?text=5"/>
     <img src="https://via.placeholder.com/150?text=6"/>
     <img src="https://via.placeholder.com/150?text=7"/>
     <img src="https://via.placeholder.com/150?text=8"/>
     <img src="https://via.placeholder.com/150?text=9"/>
</div>
...