css - container div shrink-to-fit İçerikler

Question

Burada bir duvara çarpıyorum, birilerinin yardım edebileceğini umuyorum.

Siyah bir arka plana sahip bir kapsayıcı divum var. İçimdeki içeriği dinamik olarak "küçültmek" zorundayım. Görüntülemeyi denedim: satır içi bloğu ve bunun için birkaç diğer normal düzeltmeler, ancak boşuna.

İçerideki içerik, çok fazla olan boşluksuz kutulardır: sol. Bu kutu sayısı, sayfa her yüklendiğinde dinamik olarak değişebilir.

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

Ve HTML: gerçi

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

kolay burada görmek:

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

Temelde sadece kapsayıcı div ihtiyaç (siyah İşte

benim css var) eşit siyah boşluk (sadece birkaç piksel) olduğu için sarmak d pencere yeniden boyutlandırılsa veya tarayıcının yakınlaştırma ayarları artırılmış/azaltılmış olsa bile, tüm ızgara.

Yardımlarınız için teşekkürler! Bu gerçekten bir takım nedenlerden ötürü kullanmak istemiyorsanız, hangi javascript olmadan yapılamaz gibi

GÜNCELLEME

görünüyor.

En kolay düzeltme, satır başına belirli sayıda kutu seçmek ve ardından bu sayıdan sonra "her ikisini birden temizle" yapmak gibi görünüyor. Bu, bir satır kopmasına neden olur ve daha sonra dıştaki div uygun şekilde küçülür (farklı tarayıcı yakınlaştırma seviyelerinde bile).

Answer 1

Konteyneriniz zaten display: inline-block yüzünden sıkı sıkıya daralabilir bir genişliğe sahiptir.

algoritması da tercih edilen minimum genişliği hesaplanır açık satır sonu

gerçekleştiği başka hatlar bozmadan içerik biçimlendirerek tercih edilen enine hesaplayın

1. olarak the spec tanımlanmıştır Örneğin, olası tüm satır sonlarını deneyerek. CSS 2.1 kesin algoritmayı tanımlamaz.
2. sağlanacak eni bir şekilde için; bu durumda, bu taşıyıcı blok genişliği eksi margin-left kullanılan değerleri olan border-left-width, padding-left, padding-right, border-right-width, margin-right, ve ilgili kaydırma çubukları genişlikleri .

sonra genişliği olan büzüşebilen takılabilen:

Durumda

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

,

• tercih edilen bir genişlik 100 x 38px = 3800px
• tercih edilen minimum genişlik 38px
• Availab le genişliği muhtemelen 38 ila 3800 piksel arasında bir şeydir.

Bu durumda ise şirinklenebilir takılmaya genişliği mevcut genişlik olur. Ve bu max-width: 580px ile kelepçelenirdi.

AFAIK, JS olmadan istediğiniz davranışa ulaşmanın bir yolu yoktur. Muhtemelen sebebi, küçük bir değişikliğin bazı öğeleri diğer çizgilere itmesi ve konteynerin genişliğinde büyük bir değişim yaratmasıdır.