bloques div del centro pero no en la última fila

Estoy realmente atascado tratando de mantener los bloques div centrados con la excepción de la última fila.bloques div del centro pero no en la última fila

Alguien más ya ha creado este violín que demuestra mi tipo de pregunta. Puede ver cómo los bloques en el panel de resultados permanecen centrados incluso cuando se cambia el tamaño de la ventana. Me gustaría tener un comportamiento similar, PERO si la última fila contiene menos bloques que las filas de arriba, entonces esa última fila no debe centrarse, sino alinearse a la izquierda.

Aquí es el violín: http://jsfiddle.net/zbbHc/1/

Alguien podría preguntar por qué no sólo tiene que utilizar float: left. El problema con eso es que no pude encontrar una manera de centrar mis bloques utilizando ese método sin especificar también un ancho fijo para mi envoltorio. Intento mantener todo lo más líquido posible.

Fuente

2012-07-27 Sony packman

Muy interesante, me pregunto si esto se puede hacer con CSS puro – Kos

¿Qué tan ancho es su envoltorio? ¿Importa cuántos elementos hay en una fila? – JohnC

¡Buena pregunta! Como una expansión a la pregunta de @JohnC, cuando dices que no quieres aplicar ancho fijo a tu envoltura, ¿te refieres a que prefieres no establecer un ancho fijo para las dos "columnas"? –

probar este violín http://jsfiddle.net/zbbHc/45/

No estoy seguro, pero creo que esto es lo máximo que podemos hacer uso de CSS solo.

Actualización: (esto no funcionará en todos los casos, comprobar el código debajo de la cual trabajar en todos los casos [supongo])

HTML

<div class="wrapper"> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB hide"></div> 
    <div class="iB hide"></div> 
</div>

CSS

.wrapper { 
    width: 100%; 
    background: red; 
    text-align: center; 
    text-align-last: left; 
} 

.iB { 
    display:inline-block; 
    width: 200px; 
    height: 100px; 
    background: green; 
} 
.iB.hide { 
    visibility:hidden; 
}

Aquí está el método rápido y sucio usando jQuery. Esto añadirá elementos invisibles automáticamente

violín aquí http://jsfiddle.net/fD6fn/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script> 
<style> 
.wrapper { 
    width: 100%; 
    background: red; 
    text-align: center; 
    text-align-last: left; 
} 

.iB { 
    display:inline-block; 
    width: 200px; 
    height: 100px; 
    background: green; 
} 
.iB.hide { 
    visibility:hidden; 
} 
 
</style> 
</head> 

<body> 
<div class="wrapper" id="wrapper"> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
</div> 
<script language="javascript"> 
function findHiddenElementCount() { 
var $wrapper = $("#wrapper"), 
    itemWidth = "200", 
    count = "", 
    itemCount = 7; 

    count = $wrapper.width()/itemWidth; 

// Some wild logic below, can be optimized. 
return parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ; 
} 



function addInvisibleElements() 
{ 
    // Delete invisible items 
    $("#wrapper .iB.hide").remove(); 


    var c = findHiddenElementCount(); 

    for(var i = 0; i < c;i++) 
    { 
     $("#wrapper").append('<div class="iB hide"></div>'); 
    } 

} 

$(window).bind("resize",addInvisibleElements); // resize handler 

$(document).ready(addInvisibleElements); // take care during page load 

</script> 
</body> 
</html>

Fuente

2012-07-27 15:56:31 kiranvj

Desafortunadamente, en Chrome resulta en que todo se alinea a la izquierda. –

Creo que deberías comprobarlo nuevamente y jugar con el tamaño de tu navegador. Parece funcionar perfectamente para mí, excepto que cuando obtengo mi ventana en grande necesito agregar más filas ocultas. Dependiendo de lo que busque el OP, una mezcla de esto y Javascript, o simplemente agregar una gran cantidad de filas ocultas debería funcionar. – travis

Me parece una sugerencia bastante interesante, aunque hay algunos aspectos negativos de este enfoque, la principal preocupación es que los bloques ocultos provocan que el contenedor se extienda verticalmente más de lo que debería extenderse. Otro problema (para mí) es que No tengo idea de cómo usar javascript para determinar la cantidad de bloques invisibles que deberían insertarse en diferentes situaciones. –

¿Por qué no usa el porcentaje? http://jsfiddle.net/zbbHc/38/ así es como la mayoría de los diseños de fluidos suelen trabajar

Fuente

2012-07-27 15:49:49 Paradise

Eso no está centrado. En Chrome, al menos. –

Porque necesito tenerlo centrado en la página ... –

align-center es una solución realmente vieja y ahora mala, algo que las personas deberían dejar de usar, hay muchas maneras de centrar las cosas, revisa twitter bootstrap, 960. gs fluido y encontrará excelentes ejemplos de cómo funcionan los diseños de fluido http://twitter.github.com/bootstrap/examples/fluid.html – Paradise

cuando usted dice 'si' la última fila tiene un menor número de bloques es lo que quiere decir que se trata de contenido dinámico? Si usted sabe que va a tener uno a continuación, puedes posicionarlo con relación al valor de la mitad de su propio ancho (y los márgenes, etc.)

.iB:last-child{ 
    position:relative; 
    left:-100px; 
    background:blue; 
}

http://jsfiddle.net/zbbHc/54/

Fuente

2012-07-27 16:13:57

¡Hola! No sé cuántos bloques hay en la última fila, ya que no conozco el tamaño de la ventana del navegador de un posible usuario. Si la ventana del navegador es muy amplia, más bloques caben en una fila ect. –

aah veo. hmm, en ese caso no creo que el DOM necesariamente registraría lo que vemos en la pantalla en filas, como 'filas', si solo está colocando tantos elementos en una línea antes de romper la línea, no reconocerá las filas. Bien podría estar equivocado. ¡Voy a investigar! ¡interesante pregunta! –

Puede ser posible hacer esto con una mesa (aunque tiendo a intentar evitar las tablas). Las dimensiones de las celdas de la tabla están determinadas por su contenido (por supuesto, puede agregar sus propias dimensiones o máximas/mínimas). Podría tener una tabla con una columna y (aunque no es una buena práctica) incrustar divs en la tabla (cada div es un bloque).

El ancho de la tabla sería fluido porque se basaría en el ancho de la celda más ancha (por lo tanto, los bloques se alinearán bien y se verán muy bien), y podría codificarse o crearse una secuencia de comandos (de Por supuesto, sugiero escribir un estilo/método para verificar si la última fila contiene menos bloques, y si lo hace para configurar el texto-alinear a la izquierda para esa celda, solo.

Esta solución probablemente podría mejorar, pero puede ser un buen comienzo, dependiendo de para qué vaya a utilizarlo.

Fuente

2012-07-27 17:08:13

bloques div del centro pero no en la última fila

Respuesta

Cuestiones relacionadas