Как настроить чередующиеся div в HTML и CSS?




(4)

Вам необходимо удалить position: absolute; в правой части столбца. Затем замените left на margin-left: 200px; и top с margin-top: 100px;

Я настраиваю веб-сайт с галереей изображений, которые чередуются по вертикали.

Вкратце, я попытался установить жестко заданную ширину для div (изображение на реальном веб-сайте), а затем использовал положение для размещения правого столбца div. Затем добавили третий div, который должен находиться в левом столбце после высоты div в правом столбце.

.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>

Вот предполагаемый результат: intended-outcome Вот текущий результат: current-outcome Как вы можете видеть, второй блок в левой колонке расположен непосредственно под первым блоком. Я хотел бы, чтобы он сидел после высоты правильного div.


Вы можете использовать css grid , это сделает его более динамичным, и вы добавите любые контейнеры, как захотите.

.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>

Подробнее о сетке CSS вы можете прочитать here


Измените CSS в маленьком контейнере на

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

Оставь все остальное как есть.


Удалить position:absolute; и используйте margin-left:200px вместо left:200px; для .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>





css