Comment faire prendre de l'espace à un div vide

104

Voici mon cas de système de grille 960:

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

Ceci est mon ensemble de div, utilisé comme structure de table.

CSS dit suivant:

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

Ne vous inquiétez pas de la dénomination suédoise. Je veux que les divs s'affichent même s'ils n'ont aucune valeur.

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

De même, dans ce cas, il n'y a pas de «Namn» et «Avn.Namn» dans les deux colonnes. Cependant, lors de l'exécution de cela dans Chrome, ils sont supprimés et ne poussez plus les autres divs dans l'ordre float:left. Donc, si j'ai des catégories dans les mêmes divs ci-dessus, les valeurs seraient placées sous une mauvaise catégorie.

css html

— Oldek
source

64

cela fonctionne si vous supprimez flottant. http://jsbin.com/izoca/2/edit

avec des flotteurs cela ne fonctionne que s'il y a du contenu, par exemple  

— Rito
source

5

Une autre réponse dit que mettre une hauteur minimale le fera fonctionner lorsqu'il est flotté, et certainement dans mon cas, cela a fonctionné. Si cela est toujours vrai (maintenant, en 2016), alors cette réponse est fausse. Vous pouvez simplement ajouter min-height: 1px; à la largeur: 140px; sans qu'il soit nécessaire de supprimer le flottant ou d'ajouter du contenu.

— Nick Rice

Essayé element.text(" ");dans jQuery et  apparaît sur la page.

— Lori

54

Essayez d'ajouter  aux éléments vides.

Je ne comprends pas pourquoi vous n'utilisez pas <table>ici? Ils feront ce genre de choses automatiquement.

— Pekka
source

9

D'accord. S'il s'agit de données tabulaires, utilisez un tableau - c'est à cela qu'elles servent.

— Dan Diplo

5

Après tout ce temps, les gens supposent toujours <table>== MAUVAIS.

— saluce le

4

L'utilisation  , aussi populaire soit-elle, peut entraîner des problèmes dans certains scénarios. Comme lorsque vous supprimez du text-decoration: line-through;texte ( ), le trait apparaîtra  , alors que ce que vous voulez vraiment est juste un div vide.

— Izhaki

1

@Pekka 웃, il n'est pas toujours possible "d'utiliser des tables". J'ai ce même problème ("Comment faire un div vide prendre de l'espace") pour un design réactif où je transforme un tableau horizontal en tableau vertical lorsque la largeur est courte. J'utilise déjà des tables ...

— ANeves

@ANeves une table espacera toujours correctement la largeur dans ce cas, cependant, non? Je ne suis pas sûr de suivre ....

— Pekka

25

Légère mise à jour de la réponse @ no1cobla. Cela cache la période. Cette solution fonctionne dans IE8 +.

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

— Jonathan
source

5

Si vous voulez l'utiliser comme solution de secours pour fonctionner juste lorsque votre élément est vide, ajoutez quelque chose comme:.class:after:empty

— Miguel Garrido

1

@Miguel Garrido - J'ai dû utiliser .class: empty: après pour que ça marche.

— deuxième personne le

24

Une solution simple pour les div flottants vides consiste à ajouter:

largeur (ou largeur min)
hauteur min

de cette façon, vous pouvez conserver la fonctionnalité flottante et la forcer à remplir l'espace lorsqu'elle est vide.

J'utilise cette technique dans les colonnes de mise en page, pour garder chaque colonne dans sa position même si les autres colonnes sont vides.

Exemple:

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

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

— Ingénieur
source

4

min-heightest la meilleure solution

— Vall3y

La hauteur min ne résout que le problème avec width. Cependant, cela n'empêche pas le div d'avoir une hauteur nulle. (essayez de définir l'arrière-plan div pour voir le problème). Par conséquent & nbsp; est une solution plus générale. Aussi le contenu: "." corrige le problème de hauteur zéro.

— John Henckel

1

Un min-height = 1px n'est pas égal à 0! ce sera 1 px, si vous voulez une hauteur par défaut, vous pouvez simplement dire min-height = 100px et min width = 100px, le div sera toujours 100x100 pas possible que ce soit 0

— Engineeroholic

Et utiliser "& nbsp" est une très mauvaise pratique, que se passe-t-il si vous avez un grand site Web avec de nombreux fichiers et que chaque fichier a 10K lignes html? si je vais suivre votre approche, je finirai par mettre "& nbsp" à l'intérieur de chacun dans chaque fichier !! quelle perte de temps!? Et si vous avez un site Web de contenu généré par les utilisateurs? par exemple, un utilisateur soumet un commentaire vide .. basé sur votre solution, je dois créer un code pour vérifier si le commentaire est vide, puis ajouter "& nbsp" (trop compliqué sans raison valable) min-height et min-width est la meilleure solution parce que je vais l'écrire une fois et que je ne m'en soucierai plus, même si j'ajouterai plus de contenu à l'avenir

— Engineeroholic

22

Ajoutez simplement un caractère d'espace de largeur nulle à l'intérieur d'un pseudo élément

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

— Blowsie
source

Oooh, j'aime cette idée car cela signifie que l'utilisateur ne la copiera pas accidentellement, les pseudo-éléments étant indisponibles par défaut.

— Domino

3

C'est une façon:

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

— vothaison
source

1

Je recommande content: "\200b";pour un espace de largeur nulle . L'avantage supplémentaire est que le navigateur ne sélectionnera pas ce caractère (par exemple, CTRL+A CTRL+Cil se comportera toujours de la même manière).

— yyny

3

Vous pouvez:

o Réglé .kundregister_grid_1sur:

width(ou width-min) avec height(ou min-height)
ou padding-top
ou padding-bottom
ou border-top
ou border-bottom

o Ou utilisez des pseudo-éléments : ::beforeou ::afteravec:

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

o Ou mettre à l'  intérieur d'un élément vide, mais cela peut parfois apporter des effets inattendus par exemple. en combinaison avectext-decoration: underline;

— simhumileco
source

2

Pourquoi ne pas simplement ajouter "min-width" à votre classe css?

— MrTombola
source

2

fonctionne mais ce n'est pas la bonne façon, je pense que le w min-height: 1px;

— SM Mahmodul Hassan
source

1

En utilisant le bloc en ligne, il se comportera comme un objet en ligne. donc pas de flotteurs nécessaires pour les mettre côte à côte sur une seule ligne. Et en effet, comme l'a dit Rito, les flotteurs ont besoin d'un «corps», comme ils ont besoin de dimensions.

Je suis totalement d'accord avec Pekka sur l'utilisation des tableaux. Tous ceux qui créent des mises en page à l'aide de div évitent les tables comme si c'était une maladie. Mais utilisez-les pour les données tablulaires! C'est à cela qu'ils servent. Et dans votre cas, je pense que vous en avez besoin :)

MAIS si vous voulez vraiment vraiment ce que vous voulez. Il existe un moyen de piratage css. Identique au hack float.

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

Ajoutez celui-ci et vous êtes également défini: D (Remarque: ne fonctionne pas dans IE, mais cela peut être réparé)

— no1cobla
source

1

S'ils doivent être flottants, vous pouvez toujours simplement définir la hauteur min à 1px pour qu'ils ne se réduisent pas.

— mmmeff
source

0

En créant un ensemble personnalisé de balises de mise en page, j'ai trouvé une autre réponse à ce problème. Vous trouverez ici l'ensemble personnalisé de balises et leurs classes CSS.

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 }

La clé ici est le dimensionnement et le rembourrage de la boîte.

— E Net Arch
source