CSS-Hacer que los divs se alineen horizontalmente

Tengo un div contenedor con un ancho y alto fijos, con desbordamiento: oculto.

Quiero una fila horizontal de float: left divs dentro de este contenedor. Los Divs que flotan a la izquierda empujarán naturalmente a la' línea ' de abajo después de leer el límite derecho de su padre. Esto sucederá incluso si la altura del padre no lo permite. Así es como se ve:

![Incorrecto][1] - imagen eliminada de la cabaña que había sido reemplazada por un anuncio

Cómo me gustaría que se vea:

![Derecha][2] - imagen eliminada de la cabaña que había sido reemplazada por un anuncio

Nota: el efecto que quiero se puede lograr usando elementos en línea y espacio en blanco: no-wrap (así es como lo hice en la imagen mostrada). Esto, sin embargo, no es bueno para mí (por razones demasiado largas para explicar aquí), ya que los divs niños necesitan ser elementos flotantes a nivel de bloque.

Author: billy.farroll, 2008-09-01
Source

7 answers

Puede colocar un div interno en el contenedor que sea lo suficientemente ancho para contener todos los divs flotantes.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}
<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
 86
Author: LucaM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-03 18:35:30

style="overflow:hidden" para el padre div y style="float: left" para todos los hijos divs es importante hacer que el divs se alinee horizontalmente para navegadores antiguos como IE7 y anteriores.

Para los navegadores modernos, puede usar style="display: table-cell" para todo el hijo divs y se renderizaría horizontalmente correctamente.

 27
Author: Kwex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-03 22:03:27

Puede usar la propiedad clip: 

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

Tenga en cuenta los position: absolute y overflow: hidden necesarios para que clip funcione.

 4
Author: fcurella,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-14 19:15:01

Esto parece cercano a lo que quieres:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}
<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
 4
Author: Sören Kuklau,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-03 18:36:33

Float: left, display: inline-block no alineará los elementos horizontalmente si exceden el ancho del contenedor.

Es importante tener en cuenta que el contenedor no debe envolver si los elementos DEBEN mostrarse horizontalmente: white-space: nowrap

 2
Author: William B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-28 17:57:15

Ahora puede usar css flexbox para alinear divs horizontal y verticalmente si es necesario. la fórmula general es así 

parent-div {
   display:flex;
   flex-wrap: wrap;
   justify-content: center ; /* for horizontal aligning of child divs */
   align-items : center ; /* for vertical aligning */
   }
child-div {
  width: /* yoursize for each div */ ; 
 }
 2
Author: sriram hegde,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-17 10:58:04

Flotar hacia la izquierda. En Chrome, al menos, no es necesario tener un wrapper, id="container", en el ejemplo de LucaM.

 1
Author: Wolfpack'08,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-30 07:57:55