css - container div缩小到适合内容

我在这里打墙，希望有人能帮忙。css - container div缩小到适合内容

我有一个黑色背景的容器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容器（黑）来包装，以便有相等的黑色空间（只有几个像素） d整个网格，即使窗口被调整大小或浏览器的缩放设置增加/减少。

感谢您的帮助！

UPDATE

看起来这真的不能没有的JavaScript完成的，这是我不希望使用有很多原因。

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

来源

2015-10-03 pbspry

好问题。不相关，但值得做的事情是将'＃blackboard' div从'display：inline-block;'更改为'display：table;'。 – www139

由于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
可用le宽度大概在38到3800px之间。

然后缩小到适合宽度将是可用宽度。这将与max-width: 580px夹紧。

AFAIK没有方法来实现你想要的行为没有JS。可能原因是一个小小的改变可能会将某些元素推到其他行，并在容器的宽度上产生很大的变化。

来源

2015-10-03 21:43:58 Oriol

伟大的职位 - 谢谢！ – pbspry

css - container div缩小到适合内容

回答

相关问题