Cara membuat div kosong memakan tempat

Ini adalah kasus sistem grid 960 saya:

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

Ini adalah set div saya, digunakan sebagai struktur tabel.

CSS mengatakan sebagai berikut:

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

Jangan pedulikan penamaan Swedia. Saya ingin div ditampilkan meskipun tidak memiliki nilai.

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

Jadi, dalam hal ini tidak ada 'Namn' dan 'Avn.Namn' di dua kolom. Namun saat menjalankan ini di chrome, mereka akan dihapus, dan tidak lagi mendorong div lain secara berurutan float:left. Jadi jika saya memiliki kategori dalam div yang sama di atas, maka nilainya akan ditempatkan di bawah kategori yang salah.

ini berfungsi jika Anda menghapus floating. http://jsbin.com/izoca/2/edit

dengan float, ini hanya berfungsi jika ada beberapa konten, mis  

Coba tambahkan  ke item kosong.

Saya tidak mengerti mengapa Anda tidak menggunakan di <table>sini? Mereka akan melakukan hal-hal semacam ini secara otomatis.

Pembaruan sedikit untuk jawaban @ no1cobla. Ini menyembunyikan periode. Solusi ini berfungsi di IE8 +.

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

Solusi sederhana untuk div mengambang kosong adalah dengan menambahkan:

• lebar (atau lebar minimum)
• tinggi min

dengan cara ini Anda dapat mempertahankan fungsionalitas float dan memaksanya untuk mengisi ruang saat kosong.

Saya menggunakan teknik ini di kolom tata letak halaman, untuk menjaga setiap kolom pada posisinya bahkan jika kolom lain kosong.

Contoh:

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

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

Cukup tambahkan karakter spasi lebar nol di dalam elemen semu

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

Ini satu cara:

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

Kamu bisa:

o Setel .kundregister_grid_1ke:

• width(atau width-min) dengan height(atau min-height)
• atau padding-top
• atau padding-bottom
• atau border-top
• atau border-bottom

o Atau gunakan elemen semu : ::beforeatau ::afterdengan:

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

o Atau taruh  di dalam elemen kosong, tetapi ini terkadang dapat membawa efek yang tidak terduga misalnya. dalam kombinasi dengantext-decoration: underline;

Mengapa tidak menambahkan "min-width" ke kelas css Anda?

  bekerja tetapi itu tidak benar menurut saya w min-height: 1px;

Dengan menggunakan blok-sebaris itu akan berperilaku sebagai objek sebaris. jadi tidak perlu pelampung untuk menempatkannya di samping satu sama lain dalam satu baris. Dan memang seperti yang dikatakan Rito, pelampung membutuhkan "tubuh", seperti mereka membutuhkan dimensi.

Saya sangat setuju dengan Pekka tentang penggunaan tabel. Semua orang yang membangun tata letak menggunakan tabel hindari div seperti itu penyakit. Tapi gunakan itu untuk data tabel! Itulah tujuan mereka. Dan dalam kasus Anda, saya pikir Anda membutuhkannya :)

TAPI jika Anda benar-benar menginginkan apa yang Anda inginkan. Ada cara hack css. Sama seperti retasan apung.

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

Tambahkan yang itu dan Anda juga mengatur: D (Catatan: tidak berfungsi di IE, tapi itu bisa diperbaiki)

Jika mereka perlu diapungkan, Anda selalu bisa mengatur min-height ke 1px sehingga mereka tidak runtuh.

Dalam membangun satu set tag tata letak kustom, saya menemukan jawaban lain untuk masalah ini. Disediakan di sini adalah kumpulan tag kustom dan kelas CSS-nya.

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 }

Kuncinya di sini adalah Ukuran Kotak dan Padding.