En CSS, ¿puedo alinear las alturas de los bloques en línea?

En CSS, ¿puedo alinear alturas de bloques en línea?En CSS, ¿puedo alinear las alturas de los bloques en línea?

Pensé estableciendo los márgenes a 0 y alto a automático, que el bloque se expandiría para ajustarse al espacio disponible, pero aún así se ajusta perfectamente alrededor del bloque.

.myclass { 
    display: inline-block; 
    margin: 0em; 
    padding: 1em; 
    height: auto; 
    border: solid; 
}

http://jsfiddle.net/6NQDw/

quisiera ambas cajas a ser la misma altura, pero quieren la anchura div/alturas a ser determinados por su contenido, no especificando una anchura/altura en píxeles.

¿Hay algún tipo de CSS de relleno/margen/alineación o algo así que pueda usar?

Fuente

2012-06-23 Steve Hwan

Puede usar display:table-cell; si necesita una solución de CSS puro, pero tenga en cuenta que no funcionará en IE7 (supongo que IE6 está completamente olvidado).

.myclass { 
    display: table-cell; 
    margin: 0em; 
    padding: 1em; 
    height: auto; 
    border: solid; 
}

Cross browser support for display:table-cell

Su mejor apuesta para lograr lo que necesita es establecer explícitamente JavaScript embargo ancho de envases con contenido dinámico es casi siempre el camino equivocado.

Fuente

2012-06-23 23:13:24 brezanac

'inline-block' no funciona para elementos de bloque en IE7 tampoco de todos modos, así que supongo que no es necesario el soporte IE7. – BoltClock

Bueno, estoy seguro de que solo estoy presentando opciones. – brezanac

table-cell es tentador (¿está bien usarlo fuera de una tabla?), Pero ¿hay alguna forma de preservar el espacio entre los bloques .myclass? Cuando cambié a la celda de tabla, se colapsó el espaciado, y al agregar márgenes no parece haber espacio entre las líneas del borde. http://jsfiddle.net/6NQDw/18/ –

Puede usar display: table-cell; para que las casillas coincidan entre sí.

Fuente

2012-06-23 23:14:09 exobrain

Si desea soporte para IE7, no puede usar inline-block o table-cell.

sólo tiene que utilizar float: left para estar seguro ...

de lo contrario aterrizarán usando un css separada sólo para Internet Explorer 7.

Fuente

2012-06-23 23:44:32 Geocrafter

No creo que el flotador alcance la misma altura tampoco. http://jsfiddle.net/6NQDw/17/ –

si sabes qué esperar dentro de los dos cuadros, entonces simplemente puedes agregar "altura" a "myclass". sin embargo, si espera que el contenido dentro de los cuadros pueda cambiar, entonces será un problema para solucionar en IE7. – Geocrafter

-1

Es fácil agregar una hoja de estilo para lte ie8, restablecer sus propiedades para mostrar: bloquear, flotar: izquierda, y hacer el ancho total de 99% en vez de 100%. Esto le dará la funcionalidad requerida desde el principio.

Fuente

2014-10-28 17:43:49 user3686007

en el SO compartimos el código, ¿puedes editar tu respuesta para que tenga el alcance de la pregunta de los carteles originales? – Anthony

En CSS, ¿puedo alinear las alturas de los bloques en línea?

Respuesta

Cuestiones relacionadas