Cómo hacer un div vacío tomar espacio

Intente agregar   a los elementos vacíos.

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

Ligera actualización a la respuesta @no1cobla. Esto oculta el punto. Esta solución funciona en IE8+.

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

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

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

De esta manera puede mantener la funcionalidad float y forzarla a llenar el espacio cuando esté vacía.

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

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

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

Esta es una manera:

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

Funciona, pero eso no es correcto Creo que la w min-altura: 1px;

Con el uso del bloque inline se comportará como un objeto inline. así que no se necesitan carrozas 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. Todo el mundo que construye diseños usando div evita las tablas como si fuera una enfermedad. ¡Pero úsalos para datos tablulares! Para eso están. Y en tu caso creo que los necesitas:)

PERO si realmente realmente quieres lo que querer. Hay una forma de hack css. Igual que el hack de flotador.

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

Agrega eso y también estás configurado: D (Nota: no funciona en IE, pero eso es solucionable)

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

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

Usted puede:

Se establece en .kundregister_grid_1:

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

O utilizar pseudo-elementos: ::before o ::after con:

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

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

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.