3

Этот вопрос - развитие темы Можно ли на чистом HTML и CSS сделать несколько блоков одинаковой, но переменной длины внутри родителя?. В этом моём предыдущем вопросе решением задачи стало использование отображений table и table-cell.

Теперь задача - с помощью медиазапроса добавить такой диапазон ширин окна, при котором половина блоков уйдёт на вторую строку, но сохранит "резиновые" свойства:

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

Можно сделать так: при достижении заданной ширины экрана скрыть половину блоков, а вместо них показать дублированные блоки, которые были скрыты в table-row:

<div class="container">    
    <div  class="block">
        <!-- Содержимое-->
    </div>
    <div  class="block">
        <!-- Содержимое-->
    </div>
    <div  class="block"> <!-- это скрываем -->
        <!-- Содержимое-->
    </div>
    <div  class="block"> <!-- это скрываем -->
        <!-- Содержимое-->
    </div>
        <div style="display: table-row"> <!-- это показываем -->
            <div  class="block">
            <!-- Содержимое-->
            </div>

            <div  class="block">
                <!-- Содержимое-->
            </div>
        </div>
</div>

Недостаток такого метода - необходимость в дублировании блоков. Есть что-нибудь поэлегантнее на чистом HTML и CSS?

2 ответа 2

2

Можно реализовать с помощью flexbox. Сделайте пример на весь экран, изменяйте ширину окна и увидите изменения.

@media (min-width: [значение вашего разрешения, при котором из двух колонок становятся четыре]px)

В написании css использован метод mobile first, но вы можете это сделать по-другому в зависимости от вашего подхода progressive enhancement или graceful degradation.

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background: green;
}

.block {
  background: purple;
  color: white;
  margin: 10px;
  width: 40%;
}

@media (min-width: 1000px) {
  .block {
    background: purple;
    width: 20%;
  }
}
<div class="container">
  <div class="block">
    Содержимое 1
  </div>
  <div class="block">
    Содержимое 2
  </div>
  <div class="block">
    Содержимое 3
  </div>
  <div class="block">
    Содержимое 4
  </div>
</div>

Ссылки:

Полное руководство по Flexbox (рус.)

Mobile first (рус.)

Graceful Degradation (рус.)

Progressive Enhancement (рус.)

2
  • Благодарю Вас за ответ! А в IE это нормально будет работать? Он вроде как не очень дружит в флексбоксами. 13 сен 2016 в 12:47
  • В IE меньше 10 не будет работать. В IE 10, 11 должно нормально работать, потому что не затрагиваются проблемные места, которые можно посмотреть здесь вкладка Known issues. В IE больше 11 должно работать. К сожалению, у меня нет возможности проверить работу в IE.
    – greybutton
    14 сен 2016 в 0:01
1

Вот до какого решения я додумался сам:

<div class="container">    
    <div class="sub-container>  
        <div class="block">
            <!-- Содержимое-->
        </div>
        <div class="block">
            <!-- Содержимое-->
        </div>
    </div>  
    <div class="sub-container>  
        <div class="block">
            <!-- Содержимое-->
        </div>
        <div  class="block">
            <!-- Содержимое-->
        </div>
    </div>
</div>
  • Элементу .container ставим display:table;.
  • Элементу .sub-container ставим inline-table на том диапазоне, где нужно, чтобы он был в одной строке с другим .sub-container, или table-row, когда нужно, чтобы он занимал всю строку.
  • Элемент .sub-container может содержать в себе сколько угодно блоков: как один, так и несколько.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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