Можем ли мы разместить 2 деления рядом и 3 под ними? - PullRequest
Новая
       34

Можем ли мы разместить 2 деления рядом и 3 под ними?

0 голосов
/ 04 ноября 2019

Я хочу расположить 3 деления в соответствии с шириной экрана следующим образом:

Для screen-width of < 500px расположение должно быть следующим:

layout < 500px

Дляscreen-width of > 500px расположение должно быть следующим:

image 500px">

Я пытался добиться этого при размере экрана> 500 пикселей, но я не знаю, как использовать тот же код для достижения расположениядля <500px. </p>

Я сомневаюсь, могу ли я использовать один и тот же кусок кода для получения обеих договоренностей или есть какой-то другой подход? Можно ли использовать flexbox для решения проблемы?

Вот фрагмент: 

.container {
  display: flex;
}

.divA {
  flex: 0 0 40%;
  align-self: flex-end;
}

.container-2 {
  display: flex;
  flex: 0 0 60%;
  flex-direction: column;
}
<div class="container">
  <div class="divA">
    A
  </div>
  <div class="container-2">
    <div class="divB">
      B
    </div>
    <div class="divC">
      C
    </div>
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 04 ноября 2019

edit

после просмотра вашего вопроса обновления , mediaquerie, flex, order и псевдо, чтобы создать этот пустой пробел, должно быть достаточно,По-прежнему с каждыми 3 полями прямой дочерний элемент .container.

запускает фрагмент кода в полноэкранном режиме и изменяет размер браузера, установив точку останова в 700px для демонстрационной версии. 

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.divA {
  background: lightgreen;
}

.divB {
  background: lightblue;
}

.divC {
  background: rgb(255, 255, 0);
}

.container>div,
.container:before {
  flex: 1;
  min-width: 40%;
  padding: 1em 0;
  text-align: center;
}

@media (min-width: 700px) {
  /* upadte here the px value where you swhitch to happen . 500px */
  .divA,
  .divC {
    order: 1;
    flex: 0 1 40%;
  }
  .container .divB,
  .container .divC {
    flex: 0 1 60%;
  }
  .container:before {
    content: "";
    flex: 0 1 40%;
  }
}
<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

оригинальный ответ, оставленный здесь для информации

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

пример: flex / table, это было бы для браузера, все еще имеющего проблемы с сеткой 

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 1;
  border: solid;
  min-width: 40%;
}


/* set here the width where you want switching layout */

@media screen and (max-width: 600px) {
  .container {
    display: table;
    width: 100%;
    table-layout: fixed;
    ;
  }
  .divA {
    display: table-cell;
    width: 50%;
  }
<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

или сетка ( интеллектуальная версия IE, которая частично поддерживает сетку и требует установки grid-row / grid-column или grid-area для каждого потомка) 

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.container>div {
  border: solid;
}

.divC {
  grid-row: 2;
  grid-column:1 / span 2;
}


/* set here the width where you want switching layout */

@media screen and (max-width: 600px) {
  .divC {
    grid-row: 1 / span 2;
    grid-column: 1;
  }
<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>
0 голосов
/ 04 ноября 2019

Как:

Это может быть достигнуто с помощью css grid

Если вы открыты к сеточному решению, вам нужно немного изменить структуру html. С flex это невозможно.

Решение:

Вот что я бы сделал: 

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 200px 200px;
  grid-gap: 0;
}

.divA {
  background-color: lightgreen;
}

.divB {
  background-color: lightblue;
}

.divC {
  grid-column: 1 / span 2;
  background-color: yellow;
}

@media screen and (min-width: 500px) {
  .divA {
    grid-column: 2 / 1;
    grid-row: 2 / 2

  }
  .divB {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
  }
  .divC {
    grid-column: 2 / 2;
    grid-row: 2 / 2;
  }
}
<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

Объяснение:

  • grid-template-columns позволяет определять ширину столбцов элементов сетки, и то же самое делает grid-template-rowsдля высоты строк.
  • Для каждого элемента сетки вы можете указать, сколько элементов они должны охватывать (например, ячейка таблицы может охватывать столбцы или строки) с помощью grid-column. Подробнее здесь или Google это свойство. Ваш divC состоит из 2 элементов в столбце.
  • Теперь для вашей отзывчивости напишите медиазапрос, чтобы определить ваши стили для screen-width больше 500px и сбросить .divC s grid-column и grid-row и добавьте то же самое для вашего .divA. (Поскольку этот элемент теперь занимает 2 элемента подряд)
...