Блог

У меня есть сайт, который я хотел бы разместить, как это изображение:

Красный — настольная версия, а желтый — мобильная версия. Я могу легко переключаться между ними, используя медиа-запросы.

Моя проблема в том, как написать CSS для настольной версии — я включаю только мобильную версию, потому что макет исключает некоторые методы компоновки для настольной версии.

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

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

Для этих элементов следует использовать контейнер.

например, a <ul> и сами элементы являются <li> элементами.

пример html

 <ul class="container">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
</ul>
  

настольный CSS

 ul.container li{
  width:45%;
  margin-right:5%;
  float:left;
}

ul.container li:nth-child(odd){
  clear:left;
}
  

мобильный CSS

 ul.container li{
  width:100%;
}
  

Демонстрация на http://jsfiddle.net/gaby/AgNjB/1

УВЕДОМЛЕНИЕ

Приведенный выше код работает, если вы хотите только выровнять их заголовки (левая и правая вершины находятся в одном и том же месте). Но это потребует изменений, если вы хотите, чтобы их фактическая высота также совпадала (например, для нижней границы)..