Problema con las listas flotantes de CSS: un elemento largo 'llena dos filas'

En la captura de pantalla adjunta hay una lista flotante con un elemento con una descripción larga, que empuja el primer elemento en la siguiente línea una posición a la derecha. No quiero eso.

¿Hay alguna directiva / diseño de truco / css, que empujará la siguiente línea hacia abajo, para que la línea se pueda completar y todos los elementos estarán en una línea?

Puedo generar clear: left; en cada (n / 3) + 1-child, pero creo que hay alguna solución CSS pura, simplemente parece que no puedo encontrarla en ningún lado hoy.

Hoy estoy cansado y algo lento. Gracias.

Editar: obviamente, tampoco tengo sentido hoy. Esto es lo que quiero: li con la foto de personas sentadas en el banco en la parte inferior debería estar justo debajo de la primera, pero no lo está, porque el primer elemento tiene un texto demasiado largo.

CAPTURA DE PANTALLA:

Captura de pantalla

HTML:

<ul id="photos"> 
<li> 
  <a href=".."> 
    <img src=".." alt="" height="160" width="160"/><br> 
    Vianočný koncert - Zohor 2009
    <span class="nr">61</span> 
  </a></li> 
<li> 
  <a href=".."> 
    <img src=".." alt="" height="160" width="160"/><br> 
    Koleda 2009
    <span class="nr">1</span> 
  </a></li> 
<li> 
  <a href=".."> 
    <img src=".." alt="Advent 2009" height="160" width="160"/><br> 
    Čejkovice 2009
    <span class="nr">15</span> 
  </a></li> 
<li> 
  <a href=".."> 
    <img src=".." alt="" height="160" width="160"/><br> 
    Marianka 2009
    <span class="nr">6</span> 
  </a></li> 
</ul>

CSS:

#photos li {
  display:block;
  float:left;
  position:relative;
}
#photos li a {
  text-decoration:none;
  display:block;
  padding:10px 10px 20px;
  cursor:pointer;
  width:160px;
  text-align:center;
}
#photos li a img {
  cursor:pointer;
  display:inline-block;
}

preguntado el 08 de enero de 11 a las 21:01

No entiendo completamente tu deseo, pero considera display:inline-block y text-align:justify. -

La li con la foto de personas sentadas en el banco en la parte inferior debería estar justo debajo de la primera, pero no lo está, porque el primer elemento tiene un texto demasiado largo. -

1 Respuestas

Como sugiere Phrogz, intente inline-block en lugar de flotar. IE 6/7 no lo admite directamente, pero puede falsificarlo con un simple truco.

<style>
ul { list-style-type: none;}
li { display: inline-block;}
a { display: inline-block; width: 180px; padding:10px 10px 20px; text-decoration: none; text-align: center; }
</style>
<!--[if lt IE 8]>
<style>
li { zoom:1; *display:inline;}
</style>
<![endif]-->

No usa el mismo marcado que tú, pero aquí hay un ejemplo que hice para una pregunta similar.

Respondido el 10 de enero de 11 a las 02:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.