0

есть подобная верстка с блоками, которые должны строиться в две колонки друг за другом 1,2,6 и справа от них 3,4,5 соответственно, все друг к другу впритык гранями, как переместить 3 блок на одну строку с первым, чтобы 4 был сразу же ниже 3

https://jsfiddle.net/awd98r14/

.content {
  width: 1000px;
  height: 100%;
}
.block-1 {
  width: 700px;
  height: 100px;
  float: left;
  background: red;
}
.block-2 {
  width: 700px;
  height: 200px;
  float: left;
  background: green;
}
.block-3 {
  width: 300px;
  height: 150px;
  float: right;
  background: gray;
}
.block-4 {
  width: 300px;
  height: 150px;
  float: right;
  background: yellow;
}
.block-5 {
  width: 300px;
  height: 150px;
  float: right;
  background: coral;
}
.block-6 {
  width: 700px;
  height: 550px;
  float: left;
  background: blue;
}
<div class="content">
  <div class="block-1">1</div>
  <div class="block-2">2</div>
  <div class="block-3">3</div>
  <div class="block-4">4</div>
  <div class="block-5">5</div>
  <div class="block-6">6</div>
</div>


введите сюда описание изображения

Вот такого плана должна получится верстка, на flex пробовал, но так не получается сделать.

3
  • Насколько проблематично поменять местами блоки 2 <-> 3 и 5 <-> 6? Commented 17 июн. 2019 в 11:03
  • Вышепреведенная верстка нужна для десктопа, в мобилке блоки должны располагаться в порядке 1,3,2,4,5,6 Commented 17 июн. 2019 в 11:05
  • Можете избавиться от свойства float и переделать все на flex у них есть свойство порядка order или вообще изменить все на grid Commented 17 июн. 2019 в 11:08

1 ответ 1

0

  .block-1 {
  width: 700px;
  height: 100px;
  background: red;
}

.block-2 {
  width: 700px;
  height: 200px;
  background: green;
}

.block-3 {
  width: 300px;
  height: 150px;
  background: gray;
}

.block-4 {
  width: 300px;
  height: 150px;
  background: yellow;
}

.block-5 {
  width: 300px;
  height: 150px;
  background: coral;
}

.block-6 {
  width: 700px;
  height: 550px;
  background: blue;
}

.gallery li {
  float: left;
  list-style: none;
  text-align: center;
}

.gallery2 li {
  list-style: none;
  text-align: center;
}

@media screen and (max-width: 1090px) {
  .gallery2 li {
    float: left;
  }
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  <ul class="gallery">
    <li>
      <div class="block-1">1</div>
      <div class="block-2">2</div>
    </li>

    <li>
      <div class="block-3">3</div>
      <div class="block-4">4</div>
      <div class="block-5">5</div>
    </li>


  </ul>

  <ul class="gallery2">
    <li>
      <div class="block-6">6</div>
    </li>
  </ul>
</body>

</html>

Проверяйте :)

3
  • В мобильной версии должны идти в одну колонку по нумерации
    – zhurof
    Commented 17 июн. 2019 в 11:45
  • проблема в том, что в мобильном варианте, блоки должны идти друг под другом в порядке 1,3,4,5,6. Если верстку, тогда в мобилке проблема возникает, чтобы поменять местами элементы. Commented 17 июн. 2019 в 12:01
  • @Infinite World, мобильная версия теперь должна работать Commented 17 июн. 2019 в 13:20

Ваш ответ

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

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