CSS：校準子元素，如「填充柱」

Question

我有一個div容器，其具有一個主圖像和任選的多個較小的圖片：http://jsfiddle.net/h5kc8ybm/

的多個更小的圖像是動態生成的，所以可以只是其中1個或10個。在我的JFiddle中，您可以看到，圖像只顯示在一行中。

我想實現的是，有「由colomns」填補了：

1. 在上面第一張圖片旁邊的主圖像（如本例中所示）低於
2. 第2圖像（未右的話，像在實施例）第一圖像的
3. 第三圖像右（上）低於第三圖像
4. 第四圖像

...等等。

只用CSS就可以做到這一點嗎？

更新

爲了避免誤解：所有較小的圖像應位於主圖像的右側。但是這些小圖像應該以兩行顯示，從第一行填充到第二行。

主要的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> 

LESS

.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

我可以用下面的步驟來做到這一點：

• 包裹較小的chi ldren在一個div並使其position:relative
• 就連項目申請position:absolute和重新定位他們
• 浮動他們離開

http://jsfiddle.net/0neukb08/

這種方法的缺點是，它硬編碼圖像的尺寸在「重新定位」步驟

此外，我選擇不使用彈性盒的原因是this issue隨着其寬度的增加（我也不喜歡最高的投票答案呃），但如果你事先知道容器的寬度，flexbox是一個不錯的選擇。

Answer 2

你也許可以通過

旋轉做到這一點的容器-90deg，反映它：

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

然後應用逆轉變爲縮略圖：

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

的jsfiddle：http://jsfiddle.net/h5kc8ybm/1/

請注意，容器的高度限制現在是寬度，而不是高度（因爲它旋轉了-90度。

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>

編輯：對不起，上面的代碼中並沒有完全回答這個問題畢竟。這段代碼將每個後續圖像按照從左到右，然後從上到下的順序排列，而不是從問題問的頂部到底部，然後從左到右排列。我認爲在第一張圖片上添加一個div是實現你想要的最簡潔的方法。

Answer 4

這是Flexbox的解決方案，因爲你說的main-divheight不會改變這應該工作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