Cómo hacer que un div vacío ocupe espacio

104

Este es mi caso del sistema de cuadrícula 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>

Este es mi conjunto de divs, usado como estructura de tabla.

CSS dice lo siguiente:

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

No importa el nombre sueco. Quiero que se muestren los divs aunque no tengan valores.

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

Así, en este caso no hay 'Namn' y 'Avn.Namn' en las dos columnas. Sin embargo, cuando se ejecuta esto en Chrome, se eliminan y ya no presionan los otros divs en el orden float:left. Entonces, si tengo categorías en los mismos divs anteriores, los valores se colocarían en la categoría incorrecta.

css html

— Oldek
fuente

64

funciona si quita la flotación. http://jsbin.com/izoca/2/edit

con flotadores solo funciona si hay algún contenido, por ejemplo  

— Rito
fuente

5

Otra respuesta dice que poner una altura mínima hará que funcione cuando esté flotando, y ciertamente en mi propio caso funcionó. Si eso siempre es cierto (ahora, en 2016), entonces esta respuesta es incorrecta. Simplemente puede agregar min-height: 1px; al ancho: 140px; sin la necesidad de quitar el flotador o agregar contenido.

— Nick Rice

Probado element.text(" ");en jQuery y  aparece en la página.

— Lori

54

Intente agregar  elementos vacíos.

Sin <table>embargo, no entiendo por qué no estás usando un aquí. Harán este tipo de cosas automáticamente.

— Pekka
fuente

9

Convenido. Si se trata de datos tabulares, use una tabla, para eso son.

— Dan Diplo

5

Después de todo este tiempo, la gente todavía asume <table>== MALO.

— saludo

4

El uso de una  solución tan popular como es, puede causar problemas en algunos escenarios. Como cuando tacha ( text-decoration: line-through;) el texto, el trazo se mostrará  , mientras que lo que realmente desea es solo un div en blanco.

— Izhaki

1

@Pekka 웃, no siempre es posible "usar tablas". Tengo el mismo problema ("Cómo hacer que un div vacío ocupe espacio") para un diseño receptivo en el que convierto una tabla horizontal en una tabla vertical cuando el ancho es corto. Ya estoy usando tablas ...

— ANeves

@ANeves una tabla siempre espaciará el ancho correctamente en este caso, sin embargo, ¿no? No estoy seguro de seguir ...

— Pekka

25

Ligera actualización de la respuesta de @ no1cobla. Esto oculta el período. Esta solución funciona en IE8 +.

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

— Jonathan
fuente

5

Si desea usar esto como una alternativa para que funcione solo cuando su elemento está vacío, agregue algo como:.class:after:empty

— Miguel Garrido

1

@Miguel Garrido - Tuve que usar .class: empty: after para que eso funcione.

— segunda persona

24

Una solución simple para divs flotantes vacíos es agregar:

ancho (o ancho mínimo)
altura mínima

de esta manera puede mantener la funcionalidad de flotación y forzarlo a llenar el espacio cuando está vacío.

Utilizo esta técnica en columnas de diseño de página, para mantener cada columna en su posición incluso si las otras columnas están vacías.

Ejemplo:

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

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

— Ingeniero adicto
fuente

4

min-heightes la mejor solución

— Vall3y

La altura mínima solo soluciona el problema con width. Sin embargo, no evita que el div tenga una altura cero. (intente configurar el fondo div para ver el problema). Por lo tanto & nbsp; es una solución más general. También el contenido: "." soluciona el problema de altura cero.

— John Henckel

1

¡Una altura mínima = 1 px no es igual a 0! será 1 px, si quieres la altura predeterminada, simplemente puedes decir altura mínima = 100 px y ancho mínimo = 100 px, el div siempre será 100x100 de ninguna manera será 0

— Engineeroholic

Y usar "& nbsp" es una muy mala práctica, ¿qué pasa si tienes un sitio web grande con muchos archivos y cada archivo tiene 10K líneas html? si sigo su enfoque, terminaré poniendo "& nbsp" dentro de cada archivo. ¿¡que perdida de tiempo!? ¿Qué pasa si tiene un sitio web de contenido generado por el usuario? por ejemplo, un usuario envía un comentario vacío ... según su solución, tengo que crear un código para verificar si el comentario está vacío, luego agregar "& nbsp" (más complicado sin una buena razón) min-height y min-width es la mejor solución porque lo escribiré una vez y no volveré a preocuparme, incluso si agrego más contenido en el futuro

— Engineeroholic

22

Simplemente agregue un carácter de espacio de ancho cero dentro de un pseudo elemento

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

— Blowsie
fuente

Oooh, me gusta esta idea ya que significa que el usuario no la copiará y pegará accidentalmente, ya que los pseudoelementos no se pueden seleccionar de forma predeterminada.

— Domino

3

Esta es una forma:

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

— vothaison
fuente

1

Recomiendo content: "\200b";para un espacio de ancho cero . La ventaja adicional es que el navegador no seleccionará este carácter (por ejemplo CTRL+A CTRL+C, seguirá comportándose igual).

— yyny

3

Usted puede:

o Establecer .kundregister_grid_1en:

width(o width-min) con height(o min-height)
o padding-top
o padding-bottom
o border-top
o border-bottom

o O use pseudo-elementos : ::beforeo ::aftercon:

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

o O poner  un elemento vacío dentro, pero esto a veces puede traer efectos inesperados, por ejemplo. en combinación context-decoration: underline;

— simhumileco
fuente

2

¿Por qué no simplemente agregar "min-width" a su clase css?

— MrTombola
fuente

2

funciona, pero eso no es correcto, creo que el w min-height: 1px;

— SM Mahmodul Hassan
fuente

1

Con el uso del bloque en línea, se comportará como un objeto en línea. por lo que no se necesitan flotadores para ponerlos uno al lado del otro en una línea. Y de hecho, como dijo Rito, las carrozas necesitan un "cuerpo", como necesitan dimensiones.

Estoy totalmente de acuerdo con Pekka sobre el uso de tablas. Todos los que crean diseños usando div evitan tablas como si fuera una enfermedad. ¡Pero utilícelos para datos tabulares! Para eso están hechos. Y en tu caso creo que los necesitas :)

PERO si realmente quieres lo que quieres. Hay una forma de hackear CSS. Igual que el truco de flotación.

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

Agregue ese y también estará configurado: D (Nota: no funciona en IE, pero se puede arreglar)

— no1cobla
fuente

1

Si necesitan flotar, siempre puede establecer la altura mínima en 1px para que no colapsen.

— mmmeff
fuente

0

Al crear un conjunto personalizado de etiquetas de diseño, encontré otra respuesta a este problema. Aquí se proporciona el conjunto personalizado de etiquetas y sus clases 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 clave aquí es el tamaño de la caja y el relleno.

— Arco de red E
fuente