Отзывчивый порядок div [закрыт]

Я пытаюсь улучшить веб-страницу. Макет сейчас такой. Числа представляют дивы, которыми я пытаюсь манипулировать.

текущий макет

Я хочу сделать веб-адаптивным, и новый макет, который я пытаюсь достичь этого макета. Проблема, которую я сейчас испытываю, заключается в том, что div 4 и div 5 находятся внутри div 3 , поэтому я не могу поместить div 4 выше всего, не div 5 под ним.

желаемый макет

Как мне этого добиться?

Всего 2 ответа


Поскольку div 3, по-видимому, служит только контейнером, я удалил его, поскольку он запрещает простую компоновку и структурно его можно разместить над div-4 для статического содержимого. Не стесняйтесь спрашивать с более подробной информацией, является ли div-3 требованием для конкретной цели.

По существу, поплавки будут пытаться заполнить пространство в данном контейнере с помощью нескольких правил. Мы можем использовать float: right; в сочетании с медиа-запросом для достижения желаемого результата. Главное предостережение в том, что # div-2 должен быть выше, чем # div-4, в противном случае это может вызвать некоторые проблемы, связанные с компоновкой - здесь поможет указание соответствующей минимальной высоты. По сути, приведенный ниже пример - это ваш типичный адаптивный макет, но он использует поплавок влево и вправо, а также стратегически спланированную разметку для упорядочения / переупорядочения элементов по вашему желанию.

При перемещении влево - все элементы отображаются в порядке их появления. Когда выпадают 4 и 5, правое деление 2 занимает 66%, а 4 и 5 всплывают вправо, чтобы заполнить оставшиеся 33%.

div{
  min-height: 50px; 
  border: 1px solid #333;
  width: 100%; 
  float: left; 
  box-sizing: border-box; 
  margin: 10px 0;
}

#div-1{
  width: 100%; 
  padding: 10px;
}

@media (min-width: 720px){
  #div-2{
    width: 66.6%;
    height: 100px;
  }
  #div-4, #div-5{
    float: right; 
    width: 33.3%;
  }
} 
<div id="div-1">
  <div id="div-4">4</div>
  <div id="div-2">2</div>
  <div id="div-5">5</div>
</div>


Я столкнулся с почти похожей ситуацией и решил ее, выполнив следующие действия:

  1. Скопируйте div отдельно на новой html-странице (только для грубых целей, мы удалим эту страницу позже).

  2. Убедитесь, что все div теперь независимы друг от друга.

  3. Импорт начальной загрузки ( https://getbootstrap.com/ )
  4. Теперь создайте таблицу начальной загрузки, используя класс .table, и назначьте col-md- x для каждой строки. (Замените значение x на ширину, которую вы хотите для каждого div)

Например, если вам требуется только 2 div с первым div как наибольшим, вы можете использовать этот код:

<tr class="something">
    <td class="col-md-8">A</td>
    <td class="col-md-4">B</td>
</tr>