css - justificar - centrar texto html

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

Question

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

Pensé que al establecer los márgenes en 0 y en la altura en automático, el bloque se expandiría para ajustarse al espacio disponible, pero aún así se ajusta al bloque.

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

http://jsfiddle.net/6NQDw/

Me gustaría que ambas casillas tengan la misma altura, pero que el ancho / alturas div estén determinados por su contenido, sin especificar un ancho / alto en píxeles.

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

Answer 1

Es fácil agregar una hoja de estilo para lte ie8, restablecer sus propiedades para mostrar: bloquear, flotar: izquierda y hacer que el ancho total sea del 99% en lugar del 100%. Esto le dará la funcionalidad requerida todo el camino de vuelta.

Answer 2

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

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

Soporte de navegador cruzado para la pantalla: tabla-celda

Su mejor apuesta para lograr lo que necesita es JavaScript; sin embargo, establecer explícitamente el ancho de los contenedores con contenido dinámico no siempre es la forma correcta de resolver el problema.

Answer 3

Puedes usar display: table-cell; Para hacer que las cajas coincidan con la altura del otro.

Answer 4

Si desea soporte para IE7, no puede usar bloque en línea o celda de tabla.

Solo usa float: dejado para estar seguro ...

de lo contrario, llegarás usando un css separado solo para IE7.

Answer 5

Simplemente añada vertical-align:top;

Ejemplo:

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

<div>
    <div class="myclass">
        line 1<br />
        line 2<br />
        line 3<br />
    </div>

    <div class="myclass">
        line 1<br />
        line 2<br />
        line 3<br />
        line 4<br />
        line 5<br />
        line 6<br />
    </div>
</div>