css - contenuto div shrink-to-fit container

Question

Sto colpendo un muro qui, spero che qualcuno possa aiutare.

Ho un contenitore div con uno sfondo nero che ho bisogno di "ridimensionare" in modo dinamico il contenuto al suo interno. Ho provato a visualizzare: inline-block e diverse altre soluzioni abituali per questo, ma senza successo.

Il contenuto al suo interno è un numero elevato di caselle div che sono allineate: a sinistra. Questo numero di scatole può cambiare dinamicamente ogni volta che la pagina viene caricata.

Ecco il mio 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; 
} 

E il mio 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> 

più facile da vedere qui però:

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

Fondamentalmente solo bisogno il div contenitore (nero) per avvolgere in modo che vi sia uno spazio nero uguale (solo pochi pixel) d l'intera griglia, anche se la finestra viene ridimensionata o le impostazioni di zoom del browser vengono aumentate/diminuite.

Grazie per qualsiasi aiuto!

UPDATE

Sembra che questo non può davvero essere fatto senza javascript, che io non voglio usare per una serie di motivi.

La soluzione più semplice sembra essere quella di selezionare un certo numero di caselle per riga, quindi inserire un "chiaro: entrambi" dopo quel numero. Ciò impone un'interruzione di riga e quindi il div esterno si restringe correttamente per adattarsi (anche a diversi livelli di zoom del browser).

Answer 1

Il contenitore ha già una larghezza riduttiva, a causa di display: inline-block.

L'algoritmo è definita the spec come

1. Calcolare la larghezza preferitaformattando il contenuto senza rompere linee diverse dove si verificano le interruzioni di linea esplicite
2. calcolare anche la larghezza preferita minima Ad esempio, provando tutte le possibili interruzioni di riga. CSS 2.1 non definisce l'algoritmo esatto.
3. Trova il larghezza disponibile: in questo caso, questa è la larghezza del blocco contenitore meno i valori utilizzati di margin-left, border-left-width, padding-left, padding-right, border-right-width, margin-right, e la larghezza delle eventuali rilevanti barre di scorrimento .

Poi il shrink-to-fit larghezza è:

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

Nel suo caso,

• La larghezza preferita è 100 * 38px = 3800px
• L' la larghezza minima preferita è 38px
• Il disponibile la larghezza è molto probabilmente qualcosa tra 38 e 3800 px.

Quindi la larghezza di restringimento per adattarsi sarebbe la larghezza disponibile. E quello sarebbe bloccato con max-width: 580px.

AFAIK non c'è modo di ottenere il comportamento desiderato senza JS. E probabilmente la ragione è che un piccolo cambiamento potrebbe spingere alcuni elementi in altre linee e produrre un grande cambiamento nella larghezza del contenitore.