Boş bir div nasıl yer kaplar

Bu benim 960 grid sistem durumum:

<div class="kundregister_grid_full">
    <div class="kundregister_grid_1">ID</div>
    <div class="kundregister_grid_1">Namn</div>
    <div class="kundregister_grid_1">Anv.Namn</div>
    <div class="kundregister_grid_1">Email</div>
    <div class="kundregister_grid_1">Roll</div>
    <div class="kundregister_grid_1">Aktiv</div>
</div>

Bu, tablo yapısı olarak kullanılan div setimdir.

CSS şunları söylüyor:

.kundregister_grid_1 {
    display: inline-block;
    float: left;
    margin: 0; 
    text-align: center;
}
.kundregister_grid_1 {
    width: 140px;
}

İsveççe isimlendirmeye aldırmayın. Değerleri olmasa bile div'lerin gösterilmesini istiyorum.

<div class="kundregister_grid_full">
 <div class="kundregister_grid_1">ID</div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1">Email</div>
 <div class="kundregister_grid_1">Roll</div>
 <div class="kundregister_grid_1">Aktiv</div>
</div>

Aynı şekilde, bu durumda iki sütunda 'Namn' ve 'Avn.Namn' yoktur. Ancak bunu Chrome'da çalıştırırken kaldırılırlar ve artık sıradaki diğer div'leri itmezler float:left. Dolayısıyla, yukarıdaki aynı divlerde kategorilerim varsa, değerler yanlış kategoriye yerleştirilir.

kayan özelliğini kaldırırsanız çalışır. http://jsbin.com/izoca/2/edit

floats ile yalnızca bir miktar içerik varsa çalışır, örneğin  

 Boş öğelere eklemeyi deneyin .

<table>Yine de neden burada kullanmadığınızı anlamıyorum ? Bu tür şeyleri otomatik olarak yapacaklar.

@ No1cobla cevabına küçük güncelleme. Bu, dönemi gizler. Bu çözüm IE8 + 'da çalışır.

.class:after
{
    content: '.';
    visibility: hidden;
}

Boş kayan div'ler için basit bir çözüm eklemektir:

• genişlik (veya minimum genişlik)
• min-yükseklik

bu şekilde şamandıra işlevini koruyabilir ve boşken alanı doldurmaya zorlayabilirsiniz.

Bu tekniği, diğer sütunlar boş olsa bile her sütunu konumunda tutmak için sayfa düzeni sütunlarında kullanıyorum.

Misal:

.left-column
{
   width: 200px;
   min-height: 1px;
   float: left;
}

.right-column
{
    width: 500px;
    min-height: 1px;
    float: left;
}

Sözde bir öğenin içine sıfır genişlikli bir boşluk karakteri eklemeniz yeterlidir

.class:after {
    content: '\200b';
}

Bu tek yol:

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}

Yapabilirsin:

o Şuna ayarlayın .kundregister_grid_1:

• width(veya width-min) ile height(veya min-height)
• veya padding-top
• veya padding-bottom
• veya border-top
• veya border-bottom

O ya da kullanım sözde elemanları : ::beforeya ::aftersahip:

• {content: "\200B";}
• veya {content: "."; visibility: hidden;}.

o Veya  boş öğenin içine koyun , ancak bu bazen beklenmedik etkiler yaratabilir, örn. ile bütünlüğündetext-decoration: underline;

Neden css sınıfınıza sadece "min-genişlik" eklemiyorsunuz?

  çalışıyor ama bu doğru şekilde değil w min-height: 1px;

Satır içi bloğu kullanarak, satır içi bir nesne olarak davranacaktır. bu yüzden onları tek bir hatta yan yana getirmek için kayan nokta gerekmez. Ve gerçekten de Rito'nun dediği gibi, şamandıraların boyutlara ihtiyaç duydukları gibi bir "vücuda" ihtiyacı vardır.

Pekka'ya masa kullanımı konusunda tamamen katılıyorum. Div'leri kullanarak düzenler oluşturan herkes bir rahatsızlık gibi tablolardan kaçınır. Ancak bunları tablo verileri için kullanın! Onlar bunun için var. Ve senin durumunda onlara ihtiyacın olduğunu düşünüyorum :)

AMA gerçekten istediğini gerçekten istiyorsan. Bir css hack yolu var. Float hack ile aynı.

.kundregister_grid_1:after {  content: ".";  }

Bunu ekleyin ve siz de ayarlayın: D (Not: IE'de çalışmıyor, ancak bu düzeltilebilir)

Yüzdürülmeleri gerekiyorsa, her zaman minimum yüksekliği 1 piksel olarak ayarlayabilirsiniz, böylece daralmazlar.

Özel bir düzen etiketi kümesi oluştururken, bu soruna başka bir yanıt buldum. Burada özel etiket kümesi ve bunların CSS sınıfları sağlanır.

HTML

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

Buradaki anahtar Kutu Boyutlandırma ve Dolgu.