css - container div shrink-to-fit Inhalt

Question

Ich stoße hier auf eine Wand, hoffe, dass jemand helfen kann.

Ich habe ein Container-Div mit einem schwarzen Hintergrund, den ich dynamisch den Inhalt "verkleinern" muss. Ich habe versucht Display: Inline-Block und mehrere andere Fixes dafür, aber ohne Erfolg.

Der Inhalt im Inneren ist eine große Anzahl von div-Boxen, die flush sind: links. Diese Anzahl von Feldern kann sich bei jedem Laden der Seite dynamisch ändern.

Hier ist meine 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; 
} 

Und mein 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> 

einfacher ist es hier zu sehen, aber:

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

Im Grunde nur die div-Container benötigen (schwarz) so zu wickeln, dass der gleiche Schwarzraum (nur wenige Pixel) vorhanden ist d das gesamte Raster, auch wenn die Fenstergröße geändert oder die Zoomeinstellungen des Browsers erhöht/verringert werden.

Danke für jede Hilfe!

UPDATE

Sieht aus wie das ist nicht wirklich ohne Javascript getan werden kann, was ich will nicht für eine Reihe von Gründen verwenden.

Die einfachste Lösung scheint zu sein, eine bestimmte Anzahl von Kästchen pro Zeile auszuwählen und dann nach dieser Zahl ein "clear: both" zu setzen. Dies erzwingt einen Zeilenumbruch und dann schrumpft das äußere div richtig, um zu passen (sogar bei verschiedenen Browser-Zoomstufen).

Answer 1

Ihr Container hat aufgrund der display: inline-block bereits eine Schrumpfbreite.

Der Algorithmus ist definiert in the spec als

1. Berechne die bevorzugte Breite durch den Inhalt der Formatierung ohne Linien außer wo ausdrücklich Zeilenumbrüche auftreten
2. Auch berechnen die bevorzugte minimale Breite zu brechen zB indem Sie alle möglichen Zeilenumbrüche ausprobieren. CSS 2.1 definiert nicht den genauen Algorithmus.
3. um ein verfügbare Breite: in diesem Fall, das ist die Breite des umschließenden Blocks minus die verwendeten Werte von margin-left, border-left-width, padding-left, padding-right, border-right-width, margin-right, und die Breiten aller relevanten Bildlaufleisten .

Dann wird die Schrumpf-to-fit Breite ist:

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

In Ihrem Fall

• Die bevorzugte Breite beträgt 100 * 38px = 3800px
• Die bevorzugte Mindestbreite ist 38px
• Die verfügbaren Die Breite ist sehr wahrscheinlich etwas zwischen 38 und 3800px.

Dann wäre die Shrink-to-Fit-Breite die verfügbare Breite. Und das würde mit max-width: 580px geklemmt werden.

AFAIK gibt es keine Möglichkeit, Ihr gewünschtes Verhalten ohne JS zu erreichen. Und wahrscheinlich ist der Grund, dass eine kleine Änderung einige Elemente auf andere Linien schieben und eine große Veränderung in der Breite des Containers bewirken könnte.