CSS: hacer que los divs se alineen horizontalmente

Question

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

Quiero una fila horizontal de flotador:divs izquierdos dentro de este contenedor.Los divs que flotan hacia la izquierda se insertarán naturalmente en la 'línea' de abajo después de leer el límite derecho de su padre.Esto sucederá incluso si la altura de los padres no lo permite.Así es como se ve esto:

![Incorrecto][1] - Imagen eliminada de la cabaña de imágenes que había sido reemplazada por un anuncio.

Cómo me gustaría que se viera:

![Derecha][2] - Imagen eliminada de la cabaña de imágenes que había sido reemplazada por un anuncio.

Nota:El efecto que quiero se puede lograr usando elementos en línea y espacios en blanco:sin envoltura (así lo hice yo en la imagen que se muestra).Esto, sin embargo, no es bueno para mí (por razones demasiado extensas para explicarlas aquí), ya que los divs secundarios deben ser elementos flotantes a nivel de bloque.

Answer 1

Puede colocar un div interno en el contenedor que sea lo suficientemente ancho como 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>

Answer 2

style="overflow:hidden" para padres div y style="float: left" para todo el niño divs son importantes para hacer el divs alinear horizontalmente para navegadores antiguos como IE7 e inferiores.

Para navegadores modernos, puede utilizar style="display: table-cell" para todo el niño divs y se renderizaría horizontalmente correctamente.

Answer 3

puedes usar el clip propiedad:

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

nota la position: absolute y overflow: hidden necesario para obtener clip trabajar.

Answer 4

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>

Answer 5

Flotar:izquierda, muestra:inline-block no podrá alinear los elementos horizontalmente si exceden el ancho del contenedor.

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

Answer 6

Ahora puede usar css flexbox para alinear divs horizontal y verticalmente si es necesario.la formula general es asi

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 */ ; 
 }

Answer 7

Déjalos flotar hacia la izquierda.En Chrome, al menos, no es necesario tener un contenedor, id="container", en el ejemplo de LucaM.