outerheight - total height jquery

Justifique divs con CSS para llenar el ancho del contenedor principal

Question

Esta pregunta ya tiene una respuesta aquí:

• Ancho fluido con DIVs espaciados a 7 respuestas

Tengo una página con un ancho de contenedor del 100%, por lo que es el ancho completo de la pantalla, tengo varios DIV en una estructura de cuadrícula, todos tienen flotante: quedan en ellos y no hay ancho establecido, solo un margen de 10 px.

¿Existe un método, usando CSS o jQuery, para que los divs llenen todo el ancho y se justifiquen para ajustarse a los huecos, por lo que el margen cambia según el tamaño de la pantalla?

Answer 1

Echa un vistazo a la respuesta de 30dot en este hilo para una solución CSS / HTML pura sin JavaScript que funciona en todos los navegadores, incluido IE 6 .

Ancho fluido con DIVs igualmente espaciados

http://jsfiddle.net/thirtydot/EDp8R/

HTML:

<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>​

CSS:

#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3, .box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.box1, .box3 {
background: #ccc
}
.box2, .box4 {
background: #0ff
}

En

Answer 2

Puede hacer esto con CSS si especifica todas las dimensiones en porcentajes (es decir, ancho, margen, relleno).

O si quieres un margen o relleno específico, puedes usar jQuery

$(window).resize(function() {
var $columns = $(''.column''),
numberOfColumns = $columns.length,
marginAndPadding = 0,
newColumnWidth = ($(''#container'').width() / numberOfColumns) - marginAndPadding,
newColumnWidthString = newColumnWidth.toString() + "px";
$columns.css(''width'', newColumnWidthString);
}).resize();

Answer 3

Usando CSS3 esto es ahora muy fácil.

ACTUALIZAR

Añadido soporte MS IE (créelo o no ...). No estoy muy seguro de las cosas de FF porque Mozilla cambió algo. No tengo tanto tiempo. Así que si alguien puede corregirme ...

ACTUALIZACIÓN II

Código movido a snippet

.container {
border: 1px solid black;
display: -webkit-box;
-webkit-box-pack: justify;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: justify;
-moz-box-align: center;
display: -ms-flexbox;
-ms-flex-pack: justify;
-ms-flex-align: center;
display: box;
box-pack: justify;
box-align: center;
}
.child {
background-color: red;
}

<div class="container">
<div class="child">
Some Content
</div>
<div class="child">
Some Content
</div>
<div class="child">
Some Content
</div>
</div>