Aupa
Tengo un tema que no acabo de poder solucionar, he estado mirando por
la red pero no hay manera.
El tema es una página de thumbnails que debajo llevan un texto, pero
es un texto variable. Con lo cual lo que me interesa es que al ser uno
de los textos mas extenso se amplíe el alto de todos los que están en
la misma fila, sin descojonciar todo, claro.
Y bueno, el verdadero problema viene cuando quiero que esto sea fluido.
Me explico con ejemplos:
el código podría ser:
<div id="tabla">
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
</div>
con este css:
#tabla div{
float: left;
width:150px;
padding:5px;
}
pero en cuanto uno de los textos es mas extenso los flotados se quedan
clavados en el que sobre sale.
Y no ha pasan a la izquierda, no ha habido manera de conseguir nada. :(
Si esto mismo lo quiero hacer pero en algo que no sea fluido, esto es,
con un número de columnas concreto, lo puedo hacer sin problema pero
tengo que meter cada fila en un div para romper el flotado y que no
se desencajen, algo así:
<div id="total">
<div class="fila">
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
</div>
<div class="fila">
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
</div>
<div class="fila">
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
</div>
<div class="fila">
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
<div><img src="imagen.jpg" alt="altdeimagen" /><br
/>Lorem ipsum
dolor sit amet.</div>
</div>
</div>
con este CSS:
#total div div{
width:150px;
padding:5px;
float: left;
}
. fila{
clear:left;
}
O utilizando el display: table-cell:
#total div div{
width:150px;
padding:5px;
display: table-cell:
}
y de esta manera los divs que contienen imagen y texto cogen la misma
altura, y les puedo dar borde a todos y que quede potito potito...
pero con el IE6 y 7 hemos topado, así que na...
Aun y todo no me convence un pelo el tener que meter cada fila dentro
de otro div, no pinta nada ese div.
¿como lo veis?
Espero haberme explicado bien, si no es así me re-explico con gusto e
intentando se mas claro
Gracias a todos.
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
