Разместить блок div

#html #css

#HTML #css

Вопрос:

Пожалуйста, скажите мне, что есть 3 блока div. Как разместить div 3 под div 1? Размещение блоков по местам не может быть изменено, потому что div 3 отправляет форму.

 .div1 {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

.div2 {
  width: 100px;
  height: 500px;
  border: 1px solid;
}

.div3 {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

 <div style="display:flex;">
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
  </div>
</div>
<div style="display:flex;">
  <div class="div3">
    div3
  </div>
</div>

Ответ №1:

Это определенно работа для CSS Grid . Взгляните на эту демонстрацию.

 .parent {
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: 100px 500px;
}

.parent > div {
  border: 1px solid;
}

.div2 {
  height: 500px;
  width: 100px;
}

 <div class="parent">
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
  </div>
  <div class="div3">
    div3
  </div>  
</div>

Ответ №2:

Объединить div1 и div3 в один <div></div> следующим образом:

 <div style="display:flex;">
  <div>
    <div class="div1">
      div1
    </div>
    <div class="div3">
      div3
    </div>
  </div>
  <div class="div2">
    div2
  </div>
</div>

Ответ №3:

Привет, игра Eagle,

Могу ли я предложить взглянуть на CSS-grid? Это позволяет вам переупорядочить содержимое на сайте.

В частности, grid-template-areas, который позволяет вам определять области вашего контента, а затем указывать содержимому, к какой области они принадлежат.

Хорошая ссылка, которая может оказаться полезной: https://css-tricks.com/snippets/css/complete-guide-grid /

Надеюсь, это поможет!