Foros del Web » Creando para Internet » CSS »

Tamaño de divs dentro de una caja, con float

Estas en el tema de Tamaño de divs dentro de una caja, con float en el foro de CSS en Foros del Web. Muy buenas, qué tal? Quería comentarles una duda. Tengo el código: Código PHP: $queryListas  =  mysql_query ( "SELECT DISTINCT lista_id_propia FROM wp_lista ORDER BY lista_id_propia DESC LIMIT 0,4" );     while( $queryListas2  =  mysql_fetch_assoc ( $queryListas ...
  #1 (permalink)  
Antiguo 03/02/2011, 03:30
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Tamaño de divs dentro de una caja, con float

Muy buenas, qué tal?
Quería comentarles una duda.

Tengo el código:

Código PHP:
$queryListas mysql_query("SELECT DISTINCT lista_id_propia FROM wp_lista ORDER BY lista_id_propia DESC LIMIT 0,4");
    while(
$queryListas2 mysql_fetch_assoc($queryListas) ) {
        
$IDxLista $queryListas2['lista_id_propia'];
        
        
# Muestar imágen, nombre y URL de las listas (poner en un CSS aparte más adelante)
        
echo "<div class='caja_individual'>";
        
$queryContenido mysql_query("SELECT DISTINCT lista_nombreunico, lista_imagen FROM wp_lista WHERE lista_id_propia = '$IDxLista'");
        while(
$queryContenido2 mysql_fetch_assoc($queryContenido) ){
            echo 
"<div><img src='http://".$queryContenido2['lista_imagen']."' width='130px' height='87px'></div>";
            echo 
"<div><a href='listas/?verlista=".$IDxLista." '>".$queryContenido2['lista_nombreunico']."</a></div>";
            break;
        }
        echo 
"</div>";
        
    } 
Resumiendo. Lo que hace es coger 4 datos de la BD e imprimirlos dentro de un div, cogiendo la imagen y el título de estos. Aquí dejo el css que se aplica:

Código CSS:
Ver original
  1. .caja_individual{
  2.     width:125px;  
  3.     float:left;
  4.     margin:5px;
  5.     font-size:22px;
  6.     min-height:200px;
  7. }
  8.  
  9. .caja_individual img{
  10.     border:1px solid #00CCFF;
  11. }

Aquí dejo la imagen de como queda :



El problema, como veis, es que cuando un título es más largo que otro baja la caja de abajo pero no la de al lado suya, por lo tanto queda "deforme". Habría alguna forma de hacer que ambas cajas bajen a la vez?

Gracias :)
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #2 (permalink)  
Antiguo 03/02/2011, 09:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Tamaño de divs dentro de una caja, con float

Fíjese en este ejemplo:
http://css.devillasbuenas.es/alineacion_multiple.html
en la "galería central".
Los div que contienen la imagen y el texto están identificados como /#segundo .hijo /
Si le quita la altura verá que con contenido dispar no se produce esa disposición.
Cada "fila" se alinea a la misma altura. Ahora al centro del elemento más alto de cada fila.
Pero puede variar ese detalle declarando el /vertical-align/ para modificarlo.

Después de lo anterior, una observación personal: en su ejemplo creo desproporcionado el tamaño del texto respecto a la imagen que acompaña. Ahí puede haber un error de planteamiento inicial. Pero ya le digo, es sólo una observación personal.

Edito y amplío:
Hay otras vías distintas a css para lograrlo, con alguna diferencia.
La última que he visto es una realización de Chris Coyier en css-tricks.com:
Equal height blocks in Rows Basado en jQuery

Última edición por kseso?; 03/02/2011 a las 09:12
  #3 (permalink)  
Antiguo 03/02/2011, 11:51
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Tamaño de divs dentro de una caja, con float

Si vas a mostrar la información siempre de la misma manera, dos elementos arriba y otros dos abajo, puedes encerrar cada dos elementos dentro de otro div.

<div id="contiene4elementos>
<div class="contiene2elementos>
<div id="elemento1"></div>
<div id="elemento2"></div>
</div>
<div class="contiene2elementos>
<div id="elemento3"></div>
<div id="elemento4"></div>
</div>
</div>

Si no se muestra como esperas añade la propiedad clear:both a los div.contiene2elementos.
  #4 (permalink)  
Antiguo 03/02/2011, 15:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Tamaño de divs dentro de una caja, con float

@sanxuan:
Aunque posiblemente esa sería otra forma para arreglar "el desaguisado", no creo muy conveniente aumentar de tal manera el etiquetado en el html, a más que requeriría el aumento en la programación php para contar cada par de cajas y generar otra para contenerlas, amén de los id de cada "elementoNº".

-------//-------

Y ahondando en el tema del etiquetado, creo que sería más correcto utilizar una lista para su presentación.

Etiquetas: cajas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:24.