сетка / галерея изображений с использованием materialize css - PullRequest
Новая
       7

сетка / галерея изображений с использованием materialize css

0 голосов
/ 02 июля 2018

Я хочу создать адаптивную сетку изображений, используя материализацию CSS. В этом виде сетки я сталкиваюсь с проблемой, когда изображения оставляют между собой большие пробелы. Как я могу заполнить эти пробелы между двумя изображениями, используя materialize css? Изображения одинакового размера не оставляют пустого пространства между ними (скриншот проблемы) , но когда я добавляю изображения неравного размера, они оставляют пустые места между ними ... Я хочу заполнить пустые пространства автоматически изображения разных размеров, в моей сетке более 12 изображений разных размеров. 

<div class="row">
     <div class="col s12 m6 l4">
           <div class="card">
                <img src="img/adorable-animal-baby-160933.jpg" alt="adorable-animal-baby" class="resopnsive-img card materialboxed" data-caption="adorable animal and baby">
            </div>
        </div>

        <div class="col s12 m6 l4">
             <div class="card">
                   <img src="img/adorable-animal-breed-356378.jpg" alt="adorable-animal-breed" class="resopnsive-img card materialboxed" data-caption="adorable animal breed">
               </div>
          </div>
          
         <div class="col s12 m6 l4">
               <div class="card">
                    <img src="img/animal-animal-photography-blur-460775.jpg" alt="animal-animal-photography-blur" class="resopnsive-img card materialboxed" data-caption="animal animal photography">
                </div>
          </div>
</div>

1 Ответ

0 голосов
/ 03 июля 2018

это общая проблема .

Кто-то ответил, что он использует материализованный текст потока для этой задачи.

Когда я хочу иметь беглую сетку, я использую masonry-layout , поскольку ее довольно легко интегрировать.

Вот обсуждение для решения проблемы без JavaScript .

...