как спроектировать Div тег с начальной загрузкой

Question

Я попытался сделать несколько ящиков, как показано ниже с начальной загрузкой

всех изображений были на ту же высоту, но разную ширину, так что я пытался использовать подвесную систему, но не работает. Что значит «не работает»? Если я поставил col-md-4 для image1 и поместил col-md-2 для следующего txt, поместите col-md-3 для image2, все ширины и высоты сетки будут автоматически настроены, поэтому все высоты изображений будут разными ,

Не могли бы вы помочь мне с этой проблемой?

Answer 1

Вы используете содержащий элемент для размещения сетки? Например Бутстрап 3 использует:

<div class="container"> 
... 
</div> 

Кроме того, система сетки Бутстрап масштабируется до 12 колонн по мере увеличения размера окна просмотра. Если вы хотите три колонки даже на верхней строке попробовать что-то вроде этого:

<div class="container"> 
<div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
</div> 
</div> 

проверить эту Js скрипку https://jsfiddle.net/andrewjst/3gtst4c2/ - Она имеет тот же набор столбцов вы показали на изображении.

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6 col-xs-4" style="border-style: solid;">.col-xs-6 col-xs-4</div> 
    <div class="col-xs-6 col-xs-4" style="border-style: solid;">.col-xs-6 col-xs-4</div> 
    <div class="col-xs-6 col-xs-4" style="border-style: solid;">.col-xs-6 col-xs-4</div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div> 
    <div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div> 
    <div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div> 
    <div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div> 
    </div> 
</div> 

Answer 2

Masonry приходит на ум, но, видимо, также горизонтальная: masonryHorizontal.