Elementos flotantes: llene primero la línea inferior

Question

Un proyecto en el que estoy trabajando utiliza la navegación con pestañas. Debido a que el número de pestañas se calcula dinámicamente y puede alcanzar números altos, a veces estas pestañas (que son, en esencia, <li> elementos con una declaración de estilo float: left;) se desbordan en la línea siguiente. Usando [###] para mostrar una pestaña, el resultado final algo como esto:

[###] [###] [###] [###] [###] [###] 
[###] [###] 
[Rest of the content..............] 

Debido a los últimos 4 elementos de la fila superior no tienen un elemento que 'conectar a', esto sólo se ve horrible.

¿Es posible, con la ayuda de Javascript (marcos como jQuery o MooTools aceptables, si ofrecen una solución más corta/más fácil) completar primero la fila inferior y colocar el resto de los elementos en la parte superior?

De esta manera:

[###] [###] 
[###] [###] [###] [###] [###] [###] 
[Rest of the content..............] 

(Pregunta etiquetados MooTools, ya que es el marco JS que actualmente está utilizando una respuesta dada en cualquier otro marco estaría bien, ya que probablemente podría ser traducido en MT. rápidamente)

Answer 1

A continuación se muestra el código que he utilizado para resolver este asunto. Básicamente, usando JS, calculamos el ancho del contenedor, y junto con el ancho de las pestañas (todas las pestañas tienen el mismo ancho) calculamos el número de pestañas por fila y el resto. Usando una comparación de módulo simple, podemos insertar un estilo clear: both (forzando a la pestaña a moverse a una fila vacía).

var allTabs = $$('#tab-container li'); 
var tabNum = allTabs.length; 
var tabWidth = allTabs[0].offsetWidth; 
var oWidth = $('tab-container').offsetWidth; 
var tabRowNum = Math.floor(oWidth/tabWidth); 
var tabRowOffset = (tabNum % tabRowNum); 

for(var i = 0; i < tabNum; i++) { 
    if((i % tabRowNum) == tabRowOffset) { 
     allTabs[i].setStyle('clear', 'both'); 
    } 
    else { 
     allTabs[i].setStyle('clear', 'none'); 
    } 
} 

Answer 2

Me temo que no hay una solución simple para hacer exactamente lo que quiere. Los flotadores son flotadores. Su mejor apuesta será contar las dimensiones y el número de pestañas sobre la marcha con javascript, y luego colocarlas manualmente con position:absolute. No es bonito.

Pero el problema de colocar muchas pestañas en un espacio reducido es posible. El método más simple es dar a las pestañas de la segunda fila una clase CSS adicional y usarla para ubicarlas en la parte superior de la primera fila. Esto se puede hacer en el lado del servidor o en el lado del cliente, con javascript. O bien, si conoce el número exacto de pestañas y el ancho exacto de su contenedor, puede configurar max-width y dejar que se encojan un poco. O puede ir con overflow: scroll para el contenedor de pestañas, pero esto seguramente se verá feo :)

Answer 3

Fácil con JS. código menos-que-seudo:

• Crear una div (opcionalmente)
• Crear ul
• llenarlo con li s hasta que se alcanza o bien el número máximo dado o su anchura combinada es "sólo debajo" de la necesaria ancho
• añadir el div a su documento hTML, guardar una referencia a Identificación
• r epeat, pero si tiene una referencia guardada en un div guardado, agregue la nueva antes de eso.

Answer 4

Yo sugeriría mantener todas las pestañas en una línea (hacerlo tan ancho como sea necesario) y desplazarse a la pestaña actual. (También querrá un menú desplegable que enumere todas las pestañas disponibles, para la navegación.)

El problema con lo que está tratando de hacer es que si hace obtenga lo que quiere, qué sucede cuando se selecciona una pestaña en la fila superior?

• Usted tienen una pestaña seleccionada que no está conectado al panel actual (separados por la fila inferior de las pestañas), que es feo o
• usted se mueve la fila superior de las pestañas en la parte inferior (adyacente a la panel) en cuyo caso tiene la situación que está tratando de evitar o
• Reorganiza las pestañas para colocar el seleccionado en la parte inferior, lo que hace un desastre de navegación (es imposible que el usuario sepa dónde las pestañas son).