0

Рассматривается вёрстка следующего резинового (ширина колонок меняется при изменении ширины окна) и одновременно адаптивного (на узких экранах все три колонки выстраиваются в одну) макета:

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

Рис 1: Широкие экраны и окна браузеров. Разная высота ячеек с текстом не годится.

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

Рис 2: Маленькие экраны и окна браузеров. Сам по себе макет простой, главное - получить такое отображение из того-же HTML-кода, из котрого выполнен макет на рис. 1 да других ширинах

Основую проблему представляют собой текстовые блоки. Нужно, чтобы они были одинаковой высоты, при этом по мере сжатия/растяжения количество строк в блоке меняется, оттого ссылки "подробнее" будут на разном уровне, что не эстетичено (это видно на рис. 1).

На первый взгляд, выбор в пользу табличной вёрстки может показаться привлекательным. Но есть по меньшей две причины, по которой она не подходит:

  1. Вёрстка таблиц в HTML ориентирована на строки (а не на столбцы), потому в первой строке у нас будут все заголовки, во второй - текстовые блоки (ура - в ячейках одинаковой высоты), в третьей - ссылки. Тут нарушение логики и семантики: при такой вёрстке каждый блок не является единым целым - его составляющие разнесены по строкам.

<table>
  <tr>
    <td>Лыжи</td>
    <td>Коньки</td>
    <td>Снегокаты</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, rebum pericula interpretaris ea his. </td>
    <td>His essent civibus te, id sit brute nominavi. In eum laoreet omittam, nec sale quaeque philosophia ei.</td>
    <td>Euismod nominavi ad usu, mea labore expetenda ut.</td>
  </tr>
  <tr>
    <td><a href="#"></a></td>
    <td><a href="#"></a></td>
    <td><a href="#"></a></td>
  </tr>
</table>

  1. Мы не сможем трансформировать макет для широких экранов (рис. 1) в приведённый на (рис. 2) макет для маленьких экранов, поскольку, например, все заголовки обёрнуты одной строкой.

С макетом для маленьких экранов, я думаю, всё понятно, а вот идеальный конечный результат для широких экранов должен выглядеть как показано на рисунке ниже (привёл две немно отличающихся ширины):

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

Рис. 3: Идеальный конечный результат. Высота каждого из трёх текстовых блоков равна высоте максимального из них. При этом, данный макет может трансформироваться в макет на (рис. 2) на малых ширинах окон

То есть как и в обычной таблице, новая строка начинается в зависимости от максимальной высоты ячейки в предыдущей строке. Можно ли этого достичь, не прибегая к "запрещённому приёму" - JavaScript?

5
  • советую flex... очень удобная вещь, как раз для таких проблемных моментов и создана
    – Air
    2 сен 2017 в 4:35
  • Согласен, а тех кто с ослом 10 и меншье посылать
    – user245150
    2 сен 2017 в 6:13
  • @Air, благодарю Вас за совет. А можно поподробнее? Какие свойства flex нужно использовать, чтобы добиться одинаковой высоты колонок с текстом? 2 сен 2017 в 7:07
  • посмотри это через 5 минут поймешь все сам.... youtube.com/watch?v=s2Y5oFgmm20
    – Air
    2 сен 2017 в 8:07
  • @Air, ничего особо нового не узнал... Скажите хоть на словах (без кода), как, с помощью каких свойств, сделать высоту блоков одинаковой? 2 сен 2017 в 8:45

2 ответа 2

1

а вот по другому

body {
  background: #272727;
}

.mainWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: space-between;
  width: 100%;
  height: auto;
  background: gray;
}

.wrapper {
  background: green;
  width: 30%;
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: stretch;
}

.chd {
  display: block;
  width: 100%;
  height: auto;
  margin: 1px;
  background: red;
}

.chd:nth-child(1) {
  flex-grow: 0;
}

.chd:nth-child(2) {
  flex-grow: 2;
  background: orange;
}

.chd:nth-child(3) {
  flex-grow: 0;
  text-align: right;
}

@media only screen and (max-width: 500px) {
  .mainWrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    align-content: space-between;
    width: 100%;
    height: auto;
    background: gray;
  }
  .wrapper {
    background: green;
    height: calc(100% - 10px);
    width: calc(100% - 50px);
    ;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    align-content: space-between;
  }
}
<div class="mainWrapper">
  <div class="wrapper">
    <div class="chd">Лыжи</div>
    <div class="chd">Lorem ipsum dolor sit amet, rebum pericula interpretaris ea his. </div>
    <div class="chd"><a href="#">111111</a></div>
  </div>
  <div class="wrapper">
    <div class="chd">Лыжи</div>
    <div class="chd">Lorem ipsum dolor sit amet, rebum pericula interpretaris ea his.Lorem ipsum dolor sit amet, rebum pericula interpretaris ea his. </div>
    <div class="chd"><a href="#">111111</a></div>
  </div>
  <div class="wrapper">
    <div class="chd">Лыжи</div>
    <div class="chd">Lorem ipsum dolor sit amet, rebum pericula interpretaris ea his. </div>
    <div class="chd"><a href="#">111111</a></div>
  </div>
</div>

6
  • Прошу прощения, должно быть я не совсем чётко сформулировал вопрос. Если я в Вашем первом div-e добавлю ещё текста, получится примерно то же, что на первом рисунке в моём вопросе. Мне же нужно как на третьем рисунке - чтобы все ссылки были по одной линии. Основая причина, по которой не подходит табличная вёрстка - невозможность трансформации в макет на рисунке 2. 2 сен 2017 в 11:29
  • так? !!!!!!!!!!!!!!!!!!!
    – Air
    2 сен 2017 в 11:42
  • Да, почти оно. Вы поняли, что я хотел, но при всей благодарности за Ваше время и за Ваши старания не могу зачесть Ваш ответ, так как на определённых ширинах средних блок ведёт себя странно - сначала выскакивает ссылка снизу, а потом и вовсе средний блок наползает на левый. Я перенёс Ваш код на jsfiddle . Если Вы изволите продолжить решать эту задачу, то прошу вас поизменять размеры окна браузера, чтобы увидеть артефакт. 2 сен 2017 в 11:49
  • я заметил... щас сделаю... мне самому интересно
    – Air
    2 сен 2017 в 11:52
  • щас вроде все ок....
    – Air
    2 сен 2017 в 13:11
0

ну ка глянь? я тя правильно понял?

table {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: space-between;
  width: 100%;
  height: auto;
  background: gray;
}

tr {
  background: green;
  height: auto;
  margin: auto;
}

tr:nth-child(1) {
  flex-grow: 0
}

tr:nth-child(2) {
  flex-grow: 1
}

tr:nth-child(3) {
  flex-grow: 0
}
<table>
  <tr class="raz">
    <td>Лыжи</td>
    <td>Коньки</td>
    <td>Снегокаты</td>
  </tr>
  <tr class="dva">
    <td>Lorem ipsum dolor sit amet, rebum pericula interpretaris ea his. </td>
    <td>His essent civibus te, id sit brute nominavi. In eum laoreet omittam, nec sale quaeque philosophia ei.</td>
    <td>Euismod nominavi ad usu, mea labore expetenda ut.</td>
  </tr>
  <tr class="try">
    <td>
      <a href="#">111111</a>
    </td>
    <td>
      <a href="#">222222</a>
    </td>
    <td>
      <a href="#">333333</a>
    </td>
  </tr>
</table>

5
  • Благодарю Вас за код. Всё бы замечательно с колонками одинаковой высоты, но, как и писал об этом в вопросе, прежде всего проблема в том, что эту таблицу нельзя зазбить на три колонки одна под другой на маленьких экранах, так как содержимое каждой строки "связано" <tr>. 2 сен 2017 в 9:33
  • напиши размер по какой она должна разбиться?
    – Air
    2 сен 2017 в 9:38
  • сделай все div-МИ
    – Air
    2 сен 2017 в 9:44
  • Так как это лишь пример, Вы можете сами выбрать брейкпоинт (ширина изменениея потока) и размеры блоков. У меня на данный момент дивами и сделано, только как сделать ссылки "подробнее" на одном уровне - вопрос. 2 сен 2017 в 11:24
  • глянь дальше еще один пример
    – Air
    2 сен 2017 в 11:28

Ваш ответ

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

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