CSS: hacer que los divs se alineen horizontalmente

84

Tengo un contenedor div con un fijo widthy height, con overflow: hidden.

Quiero una fila horizontal de flotador: divs izquierdos dentro de este contenedor. Los Divs que flotan a la izquierda empujarán naturalmente a la 'línea' a continuación después de leer el límite derecho de su padre. Esto sucederá incluso si heightlos padres no lo permiten. Así es como se ve esto:

! [Incorrecto] [1]: se eliminó la imagen de la choza que había sido reemplazada por un anuncio

Cómo me gustaría que se viera:

! [Derecha] [2]: imagen eliminada de la choza que había sido reemplazada por un anuncio

Nota: el efecto que quiero se puede lograr usando elementos en línea & white-space: no-wrap(así es como lo hice en la imagen que se muestra). Sin embargo, esto 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.

Robin Barnes
fuente
8
Los enlaces de tus imágenes parecen haberse roto. Si aún tiene los originales, vuelva a cargarlos en stack.imgur. ¡Gracias!
Ilmari Karonen

Respuestas:

99

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>

LucaM
fuente
¿Cómo puedo hacer el centro div externo? Intenté agregar align = "center" en el div externo, parece que no funciona.
hakunami
1
Esto también funciona para anchos de porcentaje. En mi caso, estoy usando un contenedor div con width: 200%;y los elementos secundarios son cada uno width: 50%;. Luego puedo usarlo transform: translateX(n%);en el contenedor para emular un efecto de carrusel siempre que tenga un contenedor principal conoverflow: hidden;
evolross
31

style="overflow:hidden"para los padres divy style="float: left"para todos los niños divses importante hacer la divsalineación horizontal para los navegadores antiguos como IE7 y siguientes.

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

Kwex
fuente
6

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>

Sören Kuklau
fuente
5

puedes usar la clippropiedad:

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

tenga en cuenta los position: absolutey overflow: hiddennecesarios para empezar clipa trabajar.

Fcurella
fuente
4
¿Qué es la compatibilidad con el navegador de clips?
alex
1
De w3schools.com/cssref/pr_pos_clip.asp : la propiedad clip es compatible con todos los navegadores principales. Nota: El valor "heredar" no se admite en IE7 ni en versiones anteriores. IE8 requiere un! DOCTYPE. IE9 admite "heredar".
dsomnus
4

Float: left, display: inline-block ambos fallarán al 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

Guillermo B
fuente
4

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

parent-div {
  display: flex;
  flex-wrap: wrap;
  /* for horizontal aligning of child divs */
  justify-content: center;
  /* for vertical aligning */
  align-items: center;
}

child-div {
  width: /* yoursize for each div */
  ;
}
sriram hegde
fuente
solución elegante.
zawhtut
1

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

Wolfpack'08
fuente
0

Puedes hacer algo como esto:

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

.child {
  background-color: blue;
  width: 150px;
  height: 50px;
}
<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Manjuboyz
fuente