CSS: Align дочерние элементы, как «заполнение колонки»

Question

У меня есть DIV-контейнер, который имеет один основной образ и факультативные несколько небольших изображений: http://jsfiddle.net/h5kc8ybm/

Множественные мелкие изображения генерируются динамически, так что может быть только 1 или 10 из них. На моем JFiddle вы можете видеть, что изображения отображаются только в одной строке.

То, что я хочу добиться того, что заполняются «по colomns»:

1. Первое изображение на вершине рядом с основным изображением (как показано на примере)
2. Второе изображение ниже, что (не справа от нее, как и в приведенном выше примере)
3. третьих справа изображения первого изображения (вверху)
4. четвертого изображения ниже третьих изображений

... и так далее.

Можно ли это сделать только с помощью CSS?

Update

Во избежание недоразумений: Все мелкие изображения должны быть расположены справа от основного изображения. Но эти маленькие изображения должны отображаться в двух строках, заполненных от первой строки до второй строки.

Главный элемент div никогда не изменит его высоту, а только ее ширину.

Пример

HTML

<div class="tnwrapper"> 
    <div class="tn"> 
      <img src="http://placehold.it/96x96" alt="" class="thumbnail"> 
    </div> 

    <div class="tn"> 
      <img src="http://placehold.it/96x96" alt="" class="thumbnail child"> 
    </div> 

    <div class="tn"> 
      <img src="http://placehold.it/96x96" alt="" class="thumbnail child"> 
    </div> 
</div> 

МЕНЬШЕ

.tnwrapper { 
    background-color: #f5f5f5; 
    padding: 5px 5px 5px 9px; 
    border-radius: 4px; 
    display: inline-block; 
    .tn { 
     display: inline-block; 
     vertical-align:top; 
     position: relative; 
     margin-right: 5px; 
     .thumbnail { 
      display: block; 
      padding: 4px; 
      margin-bottom: 20px; 
      line-height: 1.42857143; 
      background-color: #fff; 
      border: 1px solid #ddd; 
      border-radius: 4px; 
     } 
     .thumbnail.child { 
      width: 40px; 
     } 
    } 
} 

Answer 1

Я был в состоянии сделать это с помощью следующих шагов:

• обернуть меньший чи ldren в DIV и сделать его position:relative
• применять position:absolute на четных элементов и изменить их
• плавать их осталось

http://jsfiddle.net/0neukb08/

Недостатком этого подхода является то, что он жёстко размера изображения в шаг «перепозиции»

Кроме того, причина, по которой я решил не использовать flex-box, была this issue с ростом ее ширины (мне также не понравился самый высокий проголосовавший answ er), но flexbox - хороший вариант, если вы заранее знаете ширину контейнера.

Answer 2

Вы, наверное, можете сделать это

Поворот контейнера -90deg и отражать его:

.tnwrapper { 
    ... 
    transform: rotate(-90deg) scaleX(-1); 
} 

затем применить обратное преобразование для миниатюр:

.tnwrapper .tn { 
    ... 
    transform: rotate(90deg) scaleX(-1); 
} 

JSFiddle: http://jsfiddle.net/h5kc8ybm/1/

Обратите внимание, что верхний предел контейнера теперь равен ширине, а не высоте (потому что он был повернут -90deg.

Answer 3

CSS Flexbox стиль должен сделать трюк:

.tnwrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 200px; 
 
} 
 

 
.tn:first-child { 
 
    height: 192px; 
 
    width: 192px; 
 
}

<div class="tnwrapper"> 
 
    <div class="tn"> 
 
      <img src="http://placehold.it/96x96" alt="" class="thumbnail"> 
 
    </div> 
 

 
    <div class="tn"> 
 
      <img src="http://placehold.it/96x96" alt="" class="thumbnail child"> 
 
    </div> 
 

 
    <div class="tn"> 
 
      <img src="http://placehold.it/96x96" alt="" class="thumbnail child"> 
 
    </div> 
 
    
 
     <div class="tn"> 
 
      <img src="http://placehold.it/96x96" alt="" class="thumbnail child"> 
 
    </div> 
 
    
 
     <div class="tn"> 
 
      <img src="http://placehold.it/96x96" alt="" class="thumbnail child"> 
 
    </div> 
 
    
 
     <div class="tn"> 
 
      <img src="http://placehold.it/96x96" alt="" class="thumbnail child"> 
 
    </div> 
 
</div>

EDIT: К сожалению, выше фрагмент кода не совсем ответить на вопрос, в конце концов. Этот фрагмент помещает каждое последующее изображение в порядке слева направо, а затем сверху вниз, а не сверху вниз, а затем влево-вправо, как задал вопрос. Я думаю, что добавление div вокруг первого изображения было бы самым чистым способом выполнить то, что вы хотите.

Answer 4

Это решение с Flexbox и так как вы сказали, что height из main-div обыкновение изменить это должно работать http://jsfiddle.net/h5kc8ybm/13/

CSS

.tnwrapper { 
    background-color: #000; 
    padding: 5px 5px 5px 9px; 
    border-radius: 4px; 
    display: -webkit-flex; 
    display: flex; 
} 

.child-images { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    margin: 0 10px; 
    height: 170px; 
} 

.tnwrapper .tn .thumbnail { 
    padding: 4px; 
    margin: 10px; 
    line-height: 1.42857143; 
    background-color: #fff; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
} 

.child-images .tn img { 
    width: 40px; 
} 

Answer 5

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

В этом случае оберните основное изображение и миниатюры в отдельных div, а затем flexbox сделайте все остальное.

.wrap { 
 
    display: flex; 
 
    margin: 1em auto; 
 
    height: 280px; 
 
} 
 
.hero { 
 
    padding: 10px; 
 
} 
 
.sidekicks { 
 
    flex: 1; 
 
    padding: 10px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    align-content: flex-start; 
 
} 
 
.sidekicks .item { 
 
    width: 96px; 
 
    height: 96px; 
 
    margin: 10px; 
 
    background: lightblue; 
 
    line-height: 96px; 
 
    text-align: center; 
 
}

<div class="wrap"> 
 
    <div class="hero"> 
 
    <img src="http://lorempixel.com/image_output/city-h-c-240-250-5.jpg" alt="" /> 
 
    </div> 
 
    <div class="sidekicks"> 
 
    <div class="item">Item1</div> 
 
    <div class="item">Item2</div> 
 
    <div class="item">Item3</div> 
 
    <div class="item">Item4</div> 
 
    <div class="item">Item5</div> 
 
    <div class="item">Item6</div> 
 
    <div class="item">Item7</div> 
 
    <div class="item">Item8</div> 
 
    </div> 
 

 
</div>

Codepen Demo