posicionamiento - posicionar div html

¿Cómo configurar divs alternos en HTML y CSS?

Question

Estoy configurando un sitio web que tiene una galería de imágenes que se alternan verticalmente.

En resumen, lo que he intentado es establecer un ancho codificado duro para el div (imagen en el sitio web real) y luego usar la posición para ubicar la columna derecha de divs. Luego se agregó el tercer div que se supone que se ubicará en la columna izquierda después de la altura del div en la columna derecha.

.large-container {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
}
.small-container {
  width: 150px;
  height: 50px;
  background-color: red;
  position:absolute;
  top: 100px;
  left: 200px;
  
}

<div style="position:relative;">
  <div class="large-container">
    This is an outer container
  </div>
  <div class="small-container">
    This has been the small one
  </div>
  <div class="large-container">
    This is an outer container
  </div>
</div>

Aquí está el resultado previsto: el resultado intended-outcome Aquí está el resultado actual: resultado current-outcome Como puede ver, el segundo div en la columna izquierda se encuentra directamente debajo del primer div. Me gustaría que se sentara después de la altura del div derecho.

Answer 1

¿Has intentado cambiar a la left en .small-container a margin-left: 200px;

Answer 2

Cambie el CSS en el contenedor pequeño a

.small-container {
  width: 150px;
  height: 50px;
  background-color: red;
margin-left: 200px;  
}

Deja todo lo demás como está.

Answer 3

Eliminar position:absolute; y use margin-left:200px lugar de left:200px; para .small-container

.large-container {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
}

.small-container {
  width: 150px;
  height: 50px;
  background-color: red;
  top: 100px;
  margin-left: 200px;
}

<div style="position:relative;">
  <div class="large-container">
    This is an outer container
  </div>
  <div class="small-container">
    This has been the small one
  </div>
  <div class="large-container">
    This is an outer container
  </div>
</div>

Answer 4

Este es un buen caso para no usar "posición" y comenzar a usar la cuadrícula CSS. Esto se puede hacer fácilmente definiendo una cuadrícula con 2 columnas y 3 filas. Y luego, simplemente estableciendo los elementos como desee. Eche un vistazo al siguiente ejemplo:

.container {
  display: grid;
  grid-template-columns: 200px 150px;
  grid-template-rows: 100px 50px 100px;
}

.large-container {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
}

.small-container {
  width: 150px;
  height: 50px;
  background-color: red;
}

.item2 {
  grid-row: 2;
  grid-column: 2;
}

.item3 {
  grid-row: 3;
  grid-column: 1;
}

<div class="container">
  <div class="large-container item1"></div>
  <div class="small-container item2"></div>
  <div class=" large-container item3"></div>
</div>

Answer 5

Necesita eliminar la position: absolute; en el elemento de la columna derecha. Luego reemplace left con margin-left: 200px; y top con margin-top: 100px;

Answer 6

Puede usar la css grid , esto lo hará de forma más dinámica y agregará los contenedores que desee.

.grid {
  display: inline-grid;
  grid-template-areas: "l1 ." ". s1" "l2 .";
}

.large-container {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
}

.small-container {
  width: 150px;
  height: 50px;
  background-color: red;
  top: 100px;
  left: 200px;
}

.l1 {
  grid-area: l1;
}

.l2 {
  grid-area: l2;
}

.s1 {
  grid-area: s1;
}

<div class="grid">
  <div class="large-container l1">
    This is an outer container
  </div>
  <div class="small-container s1">
    This has been the small one
  </div>
  <div class="large-container l2">
    This is an outer container
  </div>
</div>

Puedes leer más información sobre css grid here