html - CSS: haz que los divs se alineen horizontalmente

wrapper html que es

Question

Tengo un contenedor div con un ancho y una altura fijos, con overflow: hidden.

Quiero una fila horizontal de flotante: divs izquierda dentro de este contenedor. Divs que flotan a la izquierda naturalmente empujarán a la ''línea'' a continuación después de que lean el límite correcto de su padre. Esto sucederá incluso si la altura del padre no debe permitir esto. Así es como se ve esto:

! [Incorrecto] [1] - imagen eliminada de la imagen 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 imagen 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 que se muestra). Esto, sin embargo, no es bueno para mí (por razones demasiado extensas para explicarlo aquí), ya que los divs infantiles deben ser elementos flotantes de nivel de bloque.

Answer 1

Ahora puede usar css flexbox para alinear divs horizontalmente y verticalmente si lo necesita. la fórmula general es como esto

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 2

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 3

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 envolverse si los elementos DEBEN mostrarse horizontalmente: white-space: nowrap

Answer 4

Flotarlos a la izquierda. En Chrome, al menos, no es necesario tener un contenedor, id="container" , en el ejemplo de LucaM.

Answer 5

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>

Answer 6

puedes usar la propiedad de clip :

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

tenga en cuenta la position: absolute y overflow: hidden necesita overflow: hidden para que el clip funcione.

Answer 7

style="overflow:hidden" para div principal y style="float: left" para todos los divs secundarios son importantes para hacer que los divs alineen horizontalmente para navegadores antiguos como IE7 y abajo.

Para los navegadores modernos, puede usar style="display: table-cell" para todos los divs secundarios y se representará horizontalmente.