1

Нужно разместить блоки 1,2,3 и 4 так, как показано на рисунке справа. При этом нельзя использовать абсолютное позиционирование. Все должно быть с использованием float или display: inline-block (разрешается комбинировать). HTML разметку менять нельзя.

Входные данные: ширина блоков 1,2 и 4 одинакова и равна 100px. Ширина блока 3 равна 64px, высота - 75px. Расстояние между блоками равно 6px. Ширина общего контейнера (main-container) 170px. (В ряд влезает блок 3 + блок 4 + расстояние между ними в 6 px.)

Главная проблема: чтобы блок 4 встал поверх всех блоков.

пример

  .main-container {
    font-size: 25px;
    width: 170px;
  }
  .block1 {
    width: 100px;
    background: red;
  }
  .block2 {
    width: 100px;
    background: blue;
  }
  .block3 {
    width: 64px;
    height: 75px;
    background: orange;
  }
  .block4 {
    width: 100px;
    background: green;
  }
<div class="main-container">
  <div class="block1">1</div>
  <div class="block2">2</div>
  <div class="block3">3</div>
  <div class="block4">4</div>
</div>

3
  • Если нельзя менять html и нельзя использовать абсолютное позиционирование, то сделать Вы ничего не сможете. Других способов менять элементы местами нет (ну или я не знаю). Вам же надо поменять элементы местами - 4-й поверх всех.
    – cyadvert
    26 дек 2015 в 19:23
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 27 дек 2015 в 2:04
  • Что такое htm? Подозреваю, что имелся в виду html. Если это не так, то объясните, пожалуйста, что это.
    – Nick Volynkin
    4 янв 2016 в 20:17

2 ответа 2

2

Формальное решение без абсолютного позиционирования

.main-container {
  font-size: 25px;
  width: 170px;
  margin: 0;
  padding: 0;
  position: relative;
}
.block1 {
  width: 100px;
  background: red;
  float: right;
  display: inline-block;
  position: relative;
  margin-top:28px;
}
.block2 {
  width: 100px;
  background: blue;
  float: right;
  display: inline-block;
}
.block3 {
  width: 64px;
  height: 75px;
  background: orange;
}
.block4 {
  width: 100px;
  background: green;
  float: right;
  display: inline;
  margin-top:-84px;
}
<div class="main-container">
  <div class="block1">1</div>
  <div class="block2">2</div>
  <div class="block3">3</div>
  <div class="block4">4</div>
</div>

2

А если использовать flexbox?

.main-container {
  font-size: 25px;
  width: 170px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 200px;
}
.block1 {
  width: 100px;
  background: red;
  margin: 0 0 6px 6px;
}
.block2 {
  width: 100px;
  background: blue;
  margin: 0 0 6px 6px;
}
.block3 {
  width: 64px;
  height: 75px;
  background: orange;
  order: -2;
  margin-bottom: 100px;
}
.block4 {
  width: 100px;
  background: green;
  order: -1;
  margin: 0 0 6px 6px;
}
<div class="main-container">
  <div class="block1">1</div>
  <div class="block2">2</div>
  <div class="block3">3</div>
  <div class="block4">4</div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.