CSS - Hacer divs alinear horizontalmente

Question

tengo un div contenedor con un ancho fijo y altura, con overflow: hidden.

Quiero una fila horizontal de float: left divs 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. Esto es lo que parece esto:

[el mal] [1] - imagen eliminado ImageShack que había sido sustituido por un anuncio

Cómo me gustaría que se vea:!!

[Derecha ] [2] - imagen eliminado ImageShack que había sido sustituido por un anuncio

Nota: el efecto que quiero que se puede lograr mediante el uso de elementos en línea & white-space: sin envoltura (que es cómo lo hice en la imagen mostrada). 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

Usted puede poner div interior en el recipiente que sea lo suficientemente amplia como para contener todos los divs flotando.

#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

Esto parece cerca de lo que desea:

#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

puede utilizar el clip propiedad:

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

nota del position: absolute y overflow: hidden sea necesario con el fin de obtener clip trabajar.

Answer 4

style="overflow:hidden" para padres y divstyle="float: left" para todos los niños divs son importantes para hacer la alineación horizontal divs para los viejos navegadores como Internet Explorer 7 y por debajo.

Para los navegadores modernos, puede usar style="display: table-cell" para todos los elementos divs y se mostraría horizontalmente correctamente.

Answer 5

flotar izquierda. En Chrome, al menos, no necesita tener un contenedor, id="container", en el ejemplo de LucaM.

Answer 6

flotador: izquierda, display: inline-bloque será tanto dejar de alinear los elementos horizontalmente si exceden el ancho del contenedor.

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

Answer 7

Ahora puede utilizar FlexBox css para alinear divs horizontal y vertical si es necesario.fórmula general es la siguiente

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