使外部div的宽度根据内部div的内容而变化

Question

我试图在新行中显示缩略图类，因为它们不适合外部1 div的宽度，而不显示outer-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包裹到下一行。

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

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

Answer 1

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

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