css - 使外层div的宽度根据内层div的内容变化

Question

我试图在新行中显示缩略图类，以防它们不适合外部 1 div 的宽度，而不在外部 1 div 中显示任何空格。

<div class="outer-block">
    <div class="outer-1">
        <div class="thumbnail">box 1</div>
        <div class="thumbnail">box 2</div>
        ...
        <div class="thumbnail">box 7</div>
    </div>
</div>

缩略图类的大小固定为宽、高160px、160px。我正在尝试使 outer-1 div 的宽度成为 160px 的倍数，以便带有缩略图类的其他 div 换行到下一行。

此外，我试图将 outer-1 div 的内容相对于外部块 div 居中。

这是我的 jsfiddle 的链接 - http://jsfiddle.net/K2v3W/2/

Answer 1

据我了解，您希望外部 1 自动全宽，因此仅使用 html/css 执行此操作的唯一方法是使用媒体查询将外部 1 的宽度设置为 160 像素的倍数。

http://css-tricks.com/css-media-queries/