css - 容器 div 缩小以适应内容答案

【问题标题】：css - container div shrink-to-fit contentscss - 容器 div 缩小以适应内容
【发布时间】：2015-10-04 06:08:55
【问题描述】：

我在这里碰壁了，希望有人能帮忙。

我有一个黑色背景的容器 div，我需要动态地“缩小以适应”其中的内容。我尝试了 display: inline-block 和其他几个常用的修复方法，但无济于事。

里面的内容是大量的flush:left的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，这真的无法完成，出于多种原因我不想使用它。

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

【问题讨论】：

好问题。不相关但值得做的事情是将#blackboard div 从display:inline-block; 更改为display:table;。

标签： css

【解决方案1】：

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

算法在the spec中定义为

通过格式化内容来计算首选宽度，除非出现明显的换行符，否则不换行

还可以计算首选最小宽度，例如，尝试所有可能的换行符。 CSS 2.1 没有定义确切的算法。

找到可用宽度：在这种情况下，这是包含块的宽度减去margin-left的使用值， border-left-width, padding-left, padding-right, border-right-width、margin-right，以及任何相关的宽度滚动条。

那么收缩到适合的宽度是：
min(max(preferred minimum width, available width), preferred width)

在你的情况下，

首选宽度为 100 * 38px = 3800px
首选最小宽度为 38 像素
可用宽度很可能在 38 到 3800 像素之间。

那么收缩到适合的宽度将是可用宽度。这将被max-width: 580px 钳制。

AFAIK 如果没有 JS，就无法实现您想要的行为。可能的原因是一个小的变化可能会将一些元素推到其他行并导致容器宽度发生很大的变化。

【讨论】：