CSS - 容器 div 自适应收缩内容

Question

我在这里遇到了瓶颈，希望有人能帮助。

我有一个容器div，它有一个黑色背景，我需要动态地使它“收缩到适合”其中的内容。我尝试了display:inline-block和其他几种通常用于解决此问题的方法，但都没有成功。

内部内容是大量靠左对齐的div框。这些框的数量每次加载页面时都可以动态更改。

以下是我的CSS：

#blackboard {
    background-color: black;
    padding: 2px;
    max-width: 580px;
    display: inline-block;
}

.box {
    height: 40px;
    width: 34px;
    border: 1px solid black;
    margin: 1px;
    float: left;
    background-color: White;
    display: inline-block;
}

这是我的HTML代码：

<div id="blackboard">

<div class="box" id="topbox1"></div><div class="box" id="topbox2"></div><div class="box" id="topbox3"></div><div class="box" id="topbox4"></div><div class="box" id="topbox5"></div><div class="box" id="topbox6"></div><div class="box" id="topbox7"></div><div class="box" id="topbox8"></div><div class="box" id="topbox9"></div><div class="box" id="topbox10"></div><div class="box" id="topbox11"></div><div class="box" id="topbox12"></div><div class="box" id="topbox13"></div><div class="box" id="topbox14"></div><div class="box" id="topbox15"></div><div class="box" id="topbox16"></div><div class="box" id="topbox17"></div><div class="box" id="topbox18"></div><div class="box" id="topbox19"></div><div class="box" id="topbox20"></div><div class="box" id="topbox21"></div><div class="box" id="topbox22"></div><div class="box" id="topbox23"></div><div class="box" id="topbox24"></div><div class="box" id="topbox25"></div><div class="box" id="topbox26"></div><div class="box" id="topbox27"></div><div class="box" id="topbox28"></div><div class="box" id="topbox29"></div><div class="box" id="topbox30"></div><div class="box" id="topbox31"></div><div class="box" id="topbox32"></div><div class="box" id="topbox33"></div><div class="box" id="topbox34"></div><div class="box" id="topbox35"></div>

<div style="clear:both;"></div>

</div>

更好地了解，请参考这里：

http://jsfiddle.net/pbspry/L8e34tvx/

基本上只需要容器div（黑色）进行包装，以便在整个网格周围有相等的黑色空间（仅有几个像素），即使窗口被调整大小或浏览器的缩放设置增加/减少。

感谢您的任何帮助！

更新

看起来这不能没有JavaScript完成，由于很多原因我不想使用JavaScript。

最简单的解决方法似乎是每行选择一定数量的框，并在该数量后放置“clear:both”。 这会强制换行，然后外部div会正确地收缩以适应（即使在不同的浏览器缩放级别下）。

- pbspry

---

好问题。虽然不相关，但值得做的是将 #blackboard div 的 display:inline-block; 改为 display:table;。 - www139

Answer 1

由于使用了display: inline-block，您的容器已经具有收缩适合宽度。

该算法在规范中定义为：

1. 通过不断换行以外的方式格式化内容来计算首选宽度（preferred width）
2. 还要计算首选最小宽度（preferred minimum width），例如通过尝试所有可能的换行。CSS 2.1未定义确切的算法。
3. 找到可用宽度: 在这种情况下，这是包含块的宽度减去margin-left、 border-left-width、padding-left、padding-right、 border-right-width、margin-right和任何相关滚动条的宽度。

然后收缩以适合宽度（shrink-to-fit width）为：

min(max(preferred minimum width, available width), preferred width)

在您的情况下，首选宽度为100 * 38px = 3800px，首选最小宽度为38px，可用宽度很可能在38到3800px之间。然后收缩至合适的宽度将是可用宽度，并且将被限制为max-width:580px。据我所知，没有办法在没有JS的情况下实现您想要的行为。可能的原因是，小改变可能会将某些元素推到其他行并产生容器宽度的大变化。

- Oriol