CSS：对齐子元素，如“填满列”答案

【问题标题】：CSS: Align children elements like 'filling up columns'CSS：对齐子元素，如“填满列”
【发布时间】：2015-12-02 23:25:37
【问题描述】：

我有一个 div 容器，它有一个主图像和可选的多个较小图像：http://jsfiddle.net/h5kc8ybm/

多个较小的图像是动态生成的，因此可能只有 1 个或 10 个。在我的 JFiddle 上，您可以看到，图像仅显示在一行中。

我想要实现的是，有'by colomns'填充：

第一张图片位于主图片旁边（如本例所示）
下面的第二张图片（不是在它的右边，就像在示例中一样）
第一张图片右侧的第三张图片（顶部）
第三张图片下方的第四张图片

...等等。

是否可以仅使用 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>

少

.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;
        }
    }
}

【问题讨论】：

看看css columns 属性，或者display:flex
这肯定需要改变我所看到的 HTML 结构。
columns example
也许你可以通过:nth-child(even)实现你想要的，并在底部设置偶数图像
@user3142695 看到这个example，这不是你想要的，但你可以玩:nth-child(even)并将偶数图像设置在顶部

标签： javascript jquery html css less

【解决方案1】：

我可以通过以下步骤做到这一点：

将较小的孩子包裹在一个 div 中并使其成为position:relative
在偶数项上应用position:absolute 并重新定位它们
向左浮动

http://jsfiddle.net/0neukb08/

这种方法的缺点是它在“重新定位”步骤中硬编码图像的大小

另外，我在这里选择不使用 flex-box 的原因是 this issue 增加了它的宽度（我也不喜欢投票最高的答案），但是如果你知道容器的宽度，flexbox 是一个不错的选择进步。

【讨论】：

结果是绝对定位的元素被分配了一个边距，即使当位置是绝对的时它们在文档流中不被考虑，但它们的边距是。只需添加.children .tn:nth-child(even){ margin-right: 0px; }，它就会重置它们的边距

【解决方案2】：

你可能可以这样做

将容器旋转-90度并反射它：

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

然后对缩略图应用反向转换：

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

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

请注意，容器的高度限制现在是宽度，而不是高度（因为它旋转了 -90 度。

【讨论】：

我想你误解了我的意思。所有较小的图像都应位于主图像的右侧。但是这些小图应该分两行显示，从第一行填到第二行
哦，我明白了。那就得想别的办法了^^'

【解决方案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>

编辑：抱歉，上面的 sn-p 毕竟不能完全回答这个问题。这个 sn-p 将每个后续图像按从左到右然后从上到下的顺序放置，而不是按照问题要求的从上到下然后从左到右的顺序放置。我认为在第一张图片周围添加一个 div 将是完成您想要的最干净的方式。

【讨论】：

【解决方案4】：

我不太清楚缩略图的顺序，但我认为您想要这些的列格式。

我在这种情况下将主图像和缩略图包装在单独的 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

【讨论】：

嗯，这也是我能得到的最接近的，但不幸的是它在 chrome 和 ff 中解决了背景问题：jsfiddle.net/h5kc8ybm/8
是的...这是一个已知的错误。

【解决方案5】：

这是 flexbox 的解决方案，既然你说main-div 的height 不会改变，这应该可以工作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;
}

【讨论】：