CSS: ¿cómo hacer que DIV con flotadores envueltos solo sea tan grande como debe ser para sostener los flotadores?

Tengo varias carrozas y un DIV a su alrededor. Esa DIV está dentro de otra DIV, y se supone que está centrada horizontalmente dentro de ella. El problema es que el DIV interno no es de ancho fijo, y no puede ser. Aquí está el código:

div.outer { text-align: center; } div.inner { display: inline-block; width: auto; } div.floatdiv { display: block; float: left; width: 270px; height: 400px; margin: 5px; background-color: Gray; text-align: center; } div.clearboth { clear: both; } 

Y el html:

        
Some text.
Some text.
Some text.
Some text.

Esto funciona siempre que la ventana del navegador sea lo suficientemente amplia como para que todos los flotantes permanezcan en una línea. Si la ventana se estrecha, entonces el último de los flotadores salta a la siguiente línea de flotadores: el DIV “interno” se vuelve tan ancho como el bloque que lo contiene “externo” y de repente el interior ya no está centrado en el exterior.

http://jsfiddle.net/BYszs/

No puedo pensar en nada mejor que la sugerencia aquí , que es usar consultas en los medios .

Aquí hay una implementación de eso con su código: http://jsfiddle.net/thirtydot/BYszs/4/

 @media (max-width: 1123px) { div.inner { max-width: 843px; } } @media (max-width: 843px) { div.inner { max-width: 563px; } } @media (max-width: 563px) { div.inner { max-width: 280px; } } 

Es muy engorroso y no admite (automáticamente) más elementos, ¡pero funciona!

Bueno, funciona en navegadores que admiten consultas de medios .

Si necesita soportar otros navegadores, sugiero usar el ligero Respond.js . Aunque entonces, podría decirse que también podría usar JavaScript (que tendría la ventaja de admitir cualquier cantidad de elementos automáticamente) en lugar de consultas de medios.

No creo que haya una solución a menos que vaya a la ruta javaScript (que no sean consultas de medios), ya sea actualizando en el caso del redimensionamiento del navegador o utilizando un complemento jQuery como Masonry .

http://masonry.desandro.com/demos/centered.html