html - 如何使父 div 宽度缩小以准确包裹子 imgs？

Question

Jsfiddle 在这里:http://jsfiddle.net/zxJbV/

<div class="container" style="border:1px solid black;text-align:left">
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
</div>

可能有很多 和换行符。父 div 总是扩展到 100% 宽度，不能完全包裹图像。
我现在得到的结果(右边有间距):
我想要的结果是这样的:

Answer 1

没有简单的方法可以单独使用 CSS 来做到这一点。您必须编写一堆媒体查询以适应容器的每个宽度 - 取决于容器中有多少元素/列。

也就是说，我曾经写过一些生成媒体查询的 LESS 代码。

FIDDLE 或 CODEPEN (Supports LESS)

以下是如何利用 LESS 设置媒体查询:

像这样设置迭代混合:(您可以将此代码粘贴到 http://less2css.org 中)

@item-width:100px;
@item-height:100px;
@margin: 5px;
@min-cols:2;
@max-cols:12; //set an upper limit of how may columns you want to write the media queries for


.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
    @media (min-width:@index-width) {
        #content{
            width: @index-width;
        }
    }

    .loopingClass(@index-width + @item-width);
}

.loopingClass (@item-width * @min-cols);

上面的mixin会吐出一系列媒体查询的形式:

@media (min-width: 200px) {
  #content {
    width: 200px;
  }
}
@media (min-width: 300px) {
  #content {
    width: 300px;
  }
}
@media (min-width: 400px) {
  #content {
    width: 400px;
  }
}
...
@media (min-width: 1200px) {
  #content {
    width: 1200px;
  }
}

所以用一个简单的标记，比如:

<ul id="content">
    <li class="box"></li>
    <li class="box"></li>
    ...
    <li class="box"></li>
</ul>

剩余 CSS(LESS):

 #content {
    margin:0 auto;
    overflow: auto;
    min-width: @min-cols * @item-width;
    max-width: @max-cols * @item-width;
    display: block;
    list-style:none;
    background: aqua;
}
.box {
    float: left;
    height: @item-height - 2 *@margin;
    width: @item-width - 2*@margin;
    margin:@margin;
    background-color:blue;
}

...你得到了想要的结果。

...自定义布局非常容易:

我需要做的就是根据我的需要更改我在 LESS mixin 中使用的变量 - 我得到了我想要的确切布局。

假设我有 300px X 100px 的元素，最少有 2 列，最多有 6 列，边距为 15px - 我只是像这样修改变量:

@item-width:300px;
@item-height:100px;
@margin: 15px;
@min-cols:2;
@max-cols:6;

...瞧，我得到这个 CODEPEN