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縮小到適合內容

回答

相關問題