Cara membuat div kosong memakan tempat

104

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.

css html

— Oldek
sumber

64

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

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

— Rito
sumber

5

Jawaban lain mengatakan menempatkan ketinggian min akan membuatnya bekerja saat diapungkan, dan tentu saja dalam kasus saya sendiri itu berhasil. Jika itu selalu benar (sekarang, di tahun 2016) maka jawaban ini salah. Anda bisa menambahkan min-height: 1px; dengan lebar: 140px; tanpa perlu menghapus float atau menambahkan konten.

— Nick Rice

Mencoba element.text(" ");jQuery dan  muncul di halaman.

— Lori

54

Coba tambahkan  ke item kosong.

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

— Pekka
sumber

9

Sepakat. Jika itu data tabular, gunakan tabel - untuk itulah mereka.

— Dan Diplo

5

Toh selama ini, orang masih menganggap <table>== BURUK.

— saluce

4

Menggunakan  , solusi populer seperti itu, dapat menyebabkan masalah dalam beberapa skenario. Seperti saat Anda mencoret ( text-decoration: line-through;) teks, goresan akan muncul  , sedangkan yang Anda inginkan hanyalah div kosong.

— Izhaki

1

@Pekka 웃, "menggunakan tabel" tidak selalu memungkinkan. Saya memiliki masalah yang sama ("Cara membuat div kosong mengambil ruang") untuk desain responsif di mana saya membuat tabel horizontal menjadi tabel vertikal jika lebarnya pendek. Saya sudah menggunakan tabel ...

— ANeves

@ ANeves tabel akan selalu memberi spasi pada lebar dengan benar dalam kasus ini, bukan? Tidak yakin saya ikuti ....

— Pekka

25

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

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

— Jonathan
sumber

5

Jika Anda ingin menggunakan ini sebagai fallback untuk bekerja saat elemen Anda kosong tambahkan sesuatu seperti:.class:after:empty

— Miguel Garrido

1

@ Miguel Garrido - Saya harus menggunakan .class: empty: setelah itu untuk bekerja.

— secondperson

24

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

— Insinyuroholic
sumber

4

min-heightadalah solusi terbaik

— Vall3y

Ketinggian min hanya memperbaiki masalah dengan width. Namun, itu tidak mencegah div memiliki ketinggian nol. (coba atur latar belakang div untuk melihat masalahnya). Oleh karena itu & nbsp; adalah solusi yang lebih umum. Juga isinya: "." memperbaiki masalah ketinggian nol.

— John Henckel

1

Min-height = 1px tidak sama dengan 0! itu akan menjadi 1 px, jika Anda ingin tinggi default Anda cukup mengatakan min-height = 100px dan min width = 100px, div akan selalu 100x100 tidak mungkin 0

— Engineeroholic

Dan untuk menggunakan "& nbsp" adalah praktik yang sangat buruk, bagaimana jika Anda memiliki situs web besar dengan banyak file dan setiap file memiliki 10K baris html? jika saya akan mengikuti pendekatan Anda, saya akan menempatkan "& nbsp" di dalam setiap file !! buang-buang waktu !? bagaimana jika Anda memiliki situs web konten buatan pengguna? misalnya pengguna mengirimkan komentar kosong .. berdasarkan solusi Anda, saya harus membuat kode untuk memeriksa apakah komentar tersebut kosong, lalu tambahkan "& nbsp" (terlalu rumit untuk alasan yang tidak baik) min-height dan min-width adalah solusi terbaik karena saya akan menulisnya sekali dan tidak akan mengkhawatirkannya lagi, bahkan jika saya menambahkan lebih banyak konten di masa mendatang

— Engineeroholic

22

Cukup tambahkan karakter spasi lebar nol di dalam elemen semu

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

— Blowsie
sumber

Oooh, saya suka ide ini karena itu berarti pengguna tidak akan secara tidak sengaja menyalin-tempelnya, elemen semu tidak dapat dipilih secara default.

— Domino

3

Ini satu cara:

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

— vothaison
sumber

1

Saya merekomendasikan content: "\200b";untuk ruang lebar nol . Keuntungan tambahannya adalah browser tidak akan memilih karakter ini (mis. CTRL+A CTRL+CAkan tetap berperilaku sama).

— yyny

3

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;

— simhumileco.dll
sumber

2

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

— MrTombola
sumber

2

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

— SM Mahmodul Hassan
sumber

1

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)

— no1cobla
sumber

1

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

— mmmeff
sumber

0

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.

— E Net Arch
sumber