Aupa

Si, esta es la solución que hemos aplicado en un par de webs... pero  
esta vez me había liado la manta a la cabeza a ver si encontraba algo  
mejor.

Gracias

El 15/07/2009, a las 12:18, Rodrigo Álvarez Virgós escribió:

> Hola, Martín
>
> La única solución que he encontrado a un problema parecido, es limitar
> (en el panel de administración) el número de caracteres del texto que
> acompaña a la foto, de manera que se pueda dar un alto fijo al  
> elemento
> contenedor.
>
> Un saludo
>
>
> Martin Etxauri escribió:
>> 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
>>
>>
> _______________________________________________
> 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
>

_______________________________________________
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

Responder a