Question

我在这里撞墙，希望有人可以提供帮助。

我有一个黑色背景的容器div，我需要动态地“收缩 - 适合”其中的内容。我试过显示：内联块和其他一些常用的修复程序，但无济于事。

里面的内容是大量div格式的div：左边。每次加载页面时，此数量的框都可以动态更改。

这是我的css：

-scripts (folder)
    -dashboard (folder)
         -index.php

我的HTML：

#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;
}

虽然更容易在这里看到：

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

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

感谢您的帮助！

更新

看起来如果没有javascript就无法做到这一点，我不想出于多种原因使用它。

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

Answer 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
首选最小宽度为38px
可用宽度很可能在38到3800px之间。

然后缩小到适合宽度将是可用宽度。这将被max-width: 580px限制。

如果没有JS，AFAIK无法实现您想要的行为。可能原因是一个小小的改变可能会将一些元素推向其他线条，并在容器的宽度上产生很大的变化。

css - 容器div缩小到适合的内容

1 个答案: