html - tipos - Cómo hacer 3 columnas "li" con un contenido de altura variable de la misma altura
html 5.0 caracteristicas (9)
HTML:
<ul>
<li>
<div class="one">Variable Height Title</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
<div class="four">Fixed height footer</div>
</li>
<li>
<div class="one">Variable Height Title Might be two lines long</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block</div>
<div class="four">Fixed height footer</div>
</li>
<li>
<div class="one">Variable Height Title</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block</div>
<div class="four">Fixed height footer</div>
</li>
</ul>
CSS:
li {
float:left;
width:33%;
}
.one, .three {
background-color:blue;
}
.two, .four {
background-color:green;
}
Por favor mira este ejemplo: http://jsfiddle.net/WffHD/
¿Hay una forma con css solo para hacer que los "uno" divs sean de igual altura (que deben ser dinámicos), y luego hacer que las tres columnas tengan la misma altura en base a la más alta también? Otra forma de decirlo: quiero que todos los divs "uno" tengan la misma altura, y luego todas las columnas también deben tener la misma altura al estirar la altura de los div "tres". Desafortunadamente, deben permanecer como elementos de li debido a un complemento que estoy usando. Creo que esto podría lograrse con bastante facilidad con javascript, pero estoy buscando una solución css si es posible. (Advertencia, necesita trabajar en IE7) Espero que tenga sentido y gracias!
Para IE7?
¿Y CSS puro?
¿Y todas las filas 1 (div "una") igual altura?
¿Y todas las columnas de igual altura?
La respuesta es ... No es posible.
Con gran dificultad, o con JavaScript.
Esta es en realidad una de las cosas para las que se diseñó Flex Box Layout. Entonces tendrías algo como esto:
#mylist {
display: flex;
flex-flow: row wrap;
}
#mylist>li {
flex: 1 1 100%;
}
Y debe dar a todos los elementos la misma altura. Vea la especificación completa de Flex Box Layout para más opciones.
Solo asegúrate de tener los prefijos de proveedor apropiados y estarás listo.
Derive la versión de la respuesta de William G. Rivera para una apariencia uniforme en todos los navegadores, incluido IE7, display: table; gratis. Es un poco engañoso y no hace alturas iguales de div, pero visualmente esto es lo mismo
HTML
<ul>
<li class="one">
<div class="one">Variable Height Title</div>
<div class="one">Variable Height Title that Might be two lines longgggggg</div>
<div class="one">Variable Height Title</div>
<div class="clear"></div>
</li>
<li class="two">
<div class="two">Fixed height middle block</div>
<div class="two">Fixed height middle block</div>
<div class="two">Fixed height middle block</div>
<div class="clear"></div>
</li>
<li class="three">
<div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
<div class="three">Variable height middle block</div>
<div class="three">Variable height middle block</div>
<div class="clear"></div>
</li>
<li class="four">
<div class="four">Fixed height footer</div>
<div class="four">Fixed height footer</div>
<div class="four">Fixed height footer</div>
<div class="clear"></div>
</li>
</ul>
CSS
div {
float: left;
width:33%;
}
.one, .three {
background-color:blue;
}
.two, .four {
background-color:green;
}
.clear {
width: 100%;
clear: both;
float: none;
height: 0;
}
Después de editar En lugar de usar la altura, solo usa la alineación vertical. (trabaja en tablas css)
ul { display: table; } /* Behave as table */
ul > li { display: table-cell; vertical-align: bottom; }
Hay dos aspectos para la atención en esta pregunta:
1- Alturas iguales para los de li .
2- Alturas iguales para los primeros divs.
Aquí está el primer paso:
hay una solución css simple pero engañosa que es válida y funciona muy bien en IE6 + (lo he probado antes) pero necesita un poco de valor y marca.
primero:
ul {
display: block;
overflow: hidden;
}
ul li {
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
es tan simple que estamos forzando la altura de las columnas para que sean extremadamente altas, y luego las cortamos con el desbordamiento oculto, luego forzamos las columnas más altas con una gran cantidad de relleno inferior, y nuevamente reducimos la altura de la envoltura copia de seguridad con una cantidad igual de margen inferior negativo. Esto nos da el efecto que necesitamos.
y para la segunda parte, realmente, la única forma de lograrlo es cortarlos de la estructura y colocarlos en otra estructura como la mencionada anteriormente y, por lo tanto, con un poco de magia css, parece que ambos son solo una estructura (suponiendo que no quiero usar js para esto).
Espero eso ayude.
Lo que necesitas no es posible sin algunos cambios de HTML.
Una posible alternativa, con algunos cambios de HTML, es amenazar el elemento como una tabla, la
Por ejemplo:
<ul>
<li>
<div class="one">Variable Height Title</div>
<div class="one">Variable Height Title that Might be two lines long</div>
<div class="one">Variable Height Title</div>
</li>
<li>
<div class="two">Fixed height middle block</div>
<div class="two">Fixed height middle block</div>
<div class="two">Fixed height middle block</div>
</li>
<li>
<div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
<div class="three">Variable height middle block</div>
<div class="three">Variable height middle block</div>
</li>
<li>
<div class="four">Fixed height footer</div>
<div class="four">Fixed height footer</div>
<div class="four">Fixed height footer</div>
</li>
</ul>
Puede echar un vistazo aquí: http://jsfiddle.net/WffHD/25/
Mira este post de Matthew James Taylor. Es un poco complejo hacerlo con CSS. Pero esa es la única manera "bonita". También puede usar javascript y calcular la columna más alta y aplicar esta altura a las otras dos.
Necesitas varios contenedores como este:
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
De lo que necesitas reposicionar cada columna:
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
Para llevar un paso más allá la solución del usuario1797792, debe borrar la declaración de altura en línea explícita de los elementos para poder reutilizar la función en un diseño sensible. En este caso, estaba cambiando el tamaño de los elementos de li dentro de una ul padre llamada ''prods''.
function resizeProds(){
for (var i = 0; i < $("#prods").children().length; i++) {
if (i % liPerRow == 0) {
// split the list in the li items for just this ''row''
var items = $($("#prods").children().splice(i, liPerRow));
items.height('''');
// get the highest Height value in this list
maxHeight = Math.max.apply(null, items.map(function () {
return $(this).height();
}).get());
items.height(maxHeight);
}
}
}
Para una solución jQuery (esto podría posiblemente reescribirse a solo javascript):
var liPerRow = 3; // The amount of li items on each row
var maxHeight = 0;
for (var i = 0; i < $("ul").children().length; i++) {
if (i % liPerRow == 0) {
// split the list in the li items for just this ''row''
var items = $($("ul").children().splice(i, liPerRow));
// get the highest Height value in this list
maxHeight = Math.max.apply(null, items.map(function () {
return $(this).height();
}).get());
items.height(maxHeight);
}
}