jquery - first - HTML5/CSS alinea elementos de lista dependiendo de la altura mutua de otras columnas
tabla responsive bootstrap (2)
Tengo el siguiente caso de uso:
Puede ver tres cuadros idénticos: cada cuadro comienza con un rectángulo grande, que tiene una imagen y contenido variable y, por lo tanto, tiene una altura variable. el resto consiste en una lista, que está en la parte inferior alineada verticalmente, de modo que deben obtener la misma altura.
Mi objetivo es "sincronizar" la altura de los <li> en cada uno de estos cuadros. Por lo tanto, no debería ser importante la cantidad de texto que ingrese en dicha etiqueta <li>, el diseño debería manejar automáticamente el salto de palabra y alinear el contenido como si fuera una fila.
En otras palabras, como dijo Abhitalks, quiero alinear elementos de lista con sus compañeros en otras columnas de contenido dependiendo de las alturas mutuas.
Ahora, utilicé display flex para alinear verticalmente la lista con la parte inferior del elemento. Aquí puede encontrar mi solución utilizada: alineación vertical de divs flotantes
Pero ahora tengo el problema, que si la lista no tiene contenido idéntico (por ejemplo, más de dos filas por lista, todo cambia a la cima.
Sin embargo, ¿es posible de alguna manera simular un comportamiento de fila con flexbox, pero en realidad tener una estructura de columna?
Necesito una estructura de columna, por lo que puedo obtener fácilmente un diseño receptivo.
espero que entiendas mi problema
¡gracias por adelantado!
ACTUALIZAR:
Aquí está el violín: http://jsfiddle.net/a1yr4u84/3/
Puedes ver que hice <br /> dentro del contenido del li para hacer que el contenido encaje.
<li>one <br /> two</li>
<li>one <br /> two <br /> three</li>
<li>one<br /><br /></li>
Sin embargo, no puedo controlar cuántos textos va a haber en los li''s. Y no quiero que el usuario piratee con <br /> s, pero deje que el diseño maneje el contenido, así que quiero que la lista dentro de las columnas se comporte como una fila
... tres cajas idénticas: la primera parte grande del rectángulo tiene un contenido variable y, por lo tanto, una altura variable. el resto consiste en una lista, que está en la parte inferior alineada verticalmente, de modo que deben obtener la misma altura.
Necesitas flex anidada aquí. Dado este marcado:
<div class="wrap">
<div class="col left">
<img src="..." />
<div class="content">
<p>...</p>
</div>
</div>
<div class="col middle">
<img src="" />
<ul class="content">
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="col right">
<img src="..." />
<ul class="content">
<li>...</li>
</ul>
</div>
</div>
Primero flex la envoltura que distribuirá las columnas en una fila, y dé una flex-basis de 33% (aprox) a las columnas para permitir que el contenido variable en las primeras columnas se espacien .:
.wrap { display: flex; }
.wrap .col { flex: 1 0 33%; }
A continuación, flex las columnas para diseñar la imagen y la lista de contenido en columnas. Esta vez no se requiere flex-basis :
.wrap .col { flex: 1 0 33%; display: flex; flex-direction: column; }
.col img, .col .content { flex: 0 0 auto; }
Para mantener las listas alineadas verticalmente en la parte inferior, simplemente proporcione un margin-top:auto al contenido de la lista:
.col .content { margin-top: auto; }
Aquí hay un ejemplo completo ..
Fiddle: http://jsfiddle.net/abhitalks/a1yr4u84/1/
Fragmento :
* { box-sizing: border-box; }
.wrap {
width: 80%; margin: 16px auto; padding: 12px; border: 1px solid grey;
display: flex;
}
.wrap .col {
flex: 1 0 33%; display: flex; flex-direction: column;
}
.col img, .col .content { flex: 0 0 auto; }
.col img { width: 128px; display: block; margin: 2px auto; }
.col .content { margin: auto 12px 0px 12px; }
<div class="wrap">
<div class="col left">
<img src="//lorempixel.com/128/128" />
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
<div class="col middle">
<img src="//lorempixel.com/128/128" />
<ul class="content">
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</div>
<div class="col right">
<img src="//lorempixel.com/128/128" />
<ul class="content">
<li>one</li>
<li>one</li>
</ul>
</div>
</div>
Editar:
( basado en el comentario de Op )
Si desea que los elementos de la lista se alineen con sus compañeros en otras columnas de contenido según las alturas mutuas, no podrá hacerlo con CSS. Veo que ha etiquetado la pregunta con jQuery , por lo que propongo una solución rápida y sucia utilizando jQuery.
Calcule la height de los elementos de la lista y aplique esa altura a todos los elementos correspondientes en otras columnas:
Fiddle 2: http://jsfiddle.net/abhitalks/a1yr4u84/4/
Fragmento 2 :
var $lists = $(''ul.content'');
for (i=0; i < 10; i++) {
var highest = 0;
$lists.each(function(idx, elem) {
var h = $(elem).children().eq(i).outerHeight();
if (h > highest) highest = h;
});
$lists.each(function(idx, elem) {
$(elem).children().eq(i).outerHeight(highest);
});
}
* { box-sizing: border-box; }
.wrap {
width: 80%; margin: 16px auto; padding: 12px; border: 1px solid grey;
display: flex;
}
.wrap .col {
flex: 1 0 33%; display: flex; flex-direction: column;
}
.col img, .col .content { flex: 0 0 auto; }
.col img { width: 128px; display: block; margin: 2px auto; }
.col .content { margin: 0px 12px 0px 12px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="col left">
<img src="//lorempixel.com/128/128" />
<ul class="content">
<li>one <br /> two</li>
<li>one <br /> two <br /> three</li>
<li>one</li>
<li>one</li>
</ul>
</div>
<div class="col middle">
<img src="//lorempixel.com/128/128" />
<ul class="content">
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</div>
<div class="col right">
<img src="//lorempixel.com/128/128" />
<ul class="content">
<li>one <br /> two</li>
<li>one</li>
</ul>
</div>
</div>
Nota : He usado un número arbitrario de 10 para recorrer los elementos de la lista. En el código de producción, debe calcular el número de elementos de la lista en la lista más grande.
Establezca css line-height en los objetos de fila. Todos deben estar configurados con la misma altura.