elementos de la lista con la misma altura

Question

que han creado un violín: http://jsfiddle.net/pQZ8f/

Quiero tener tanto los elementos de la lista a ser de su misma altura sin ajustar manualmente la altura. Quiero que crezca automáticamente. No quiero usar javascript. ¿Se puede hacer a través de CSS?

Answer 1

Ahh, viejo problema de la misma altura de la columna.

Una solución es hacer un pedo con margen/relleno inferior.

Obras en IE7 + (incluso podría funcionar usando IE6, no tengo instalado)

ul { 
    overflow: hidden; 
    border: 1px solid black; 
    float: left; 
} 
li { 
    float:left; 
    width:100px; 
    background: red; 
    padding-bottom: 10000px; 
    margin-bottom: -10000px; 
} 
li + li { 
    border-left: 1px solid black; 
} 

JSfiddle Demo

Answer 2

Parece que está buscando un diseño tabular, por lo que quizás la mejor opción sea utilizar <table> en lugar de elementos flotantes <li>.

Dicho esto, también puede especificar estilos de tablas en sus elementos:

ul { 
    display: table-row; 
} 

li { 
    width: 100px; 
    border: 1px solid black; 
    display: table-cell; 
} 

Esto debería funcionar en la mayoría de los navegadores modernos. Encontrará un violín actualizado here.

Answer 3

Depende de qué que ellos quieren la misma altura: lo efecto general ¿estás tratando de lograr?

Una opción: Si usted es simplemente tratando de coincidir con un fondo o algo así, se puede poner el fondo en el lugar de los <ul><li> 's y el <ul> se expandirá automáticamente a cualquiera que sea la altura máxima es de sus elementos secundarios .

Además, si usted está tratando de hacer que la misma altura para que pueda alinear la parte inferior del texto, se pueden combinar display: inline-block en lugar de float y horizontal-align: bottom;. El resultado en este Fiddle le ofrece algo que al menos parece como el <li> tienen la misma altura, pero no funcionarán para los bordes.

Answer 4

que puede utilizar: display: inline-table en sus elementos LI

li { 
    width:100px; 
    background: red; 
    display: inline-table 
} 

aquí es JSFiddle

Answer 5

utilizo biblioteca jquery.matchHeight.js para este propósito. Adición de class = "frame-altura" a todos elementos li, hacer toda li elementos la misma altura que la más alta li elemento.

Answer 6

La lista se establece como una tabla y contendrá las propiedades de la tabla. para el elemento de la lista cuando establece la celda de tabla obtendrán propiedades de celda de la tabla y de forma predeterminada todas las celdas de la tabla obtendrán la misma altura.

<!--SCSS--> 
.list { 
    display: table; 

    .list-item { 
     display: table-cell; 
    } 
} 



<!--html--> 
<ul class="list"> 
    <li class="list-iteam"> 
     <h1>Heading</h1> 
     <p>Details in text</p> 
    </li> 
    <li class="list-iteam"> 
     <h1>Heading 2</h1> 
    </li> 
    <li class="list-iteam"> 
     <h1>Heading 2</h1> 
     <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text </p> 
    </li> 
</ul> 

Answer 7

Es 2018, y tenemos pantalla: flex, con el apoyo del navegador 97,66% (https://caniuse.com/#feat=flexbox)

Con FlexBox, todo lo que tiene que hacer es:

ul { 
    display: flex; 
} 

li{ 
width:100px; 
border: 1px solid black; 
} 

Aquí está el violín: http://jsfiddle.net/pQZ8f/1076/