Поместите элемент относительно предка или более раннего брата

Question

У меня был следующий код, который дал мне желаемый вид, но я всегда чувствовал, что порядок документов был неправильным, поскольку боковая панель должна появиться позже:

<h1>header</h1>
<div style="float:right">variable height sidebar</div>
variable height content
<h2>sub-section</h2>

Боковая панель на рабочих столах может продолжаться в следующем разделе, что нормально. Я предпочел бы иметь это, чем большой пробел (то есть h2 не очищает: правильно).

Однако на мобильных платформах я хотел линеаризовать боковую панель, чтобы она шла после контента. Поэтому мне пришлось изменить порядок документов и сделать его таким, каким он был раньше. Очевидно, я мог бы сделать это:

<h1>header</h1>
<div style="overflow:auto">
    <div style="float:left">variable height content</div>
    variable height sidebar
</div>
<h2>sub-section</h2>

И оставьте большой пробел под контентом, если он короткий. Но мне было интересно, можно ли было сохранить контент «без изменений», но все же расположить боковую панель под элементом h2 на рабочих столах.

Самый ранний браузер, который мне небезразличен, это IE7. Я не хочу решения JavaScript. Я пробовал отрицательные верхние поля и пробовал абсолютное внутреннее относительное позиционирование с элементом обертки, но ни одно из них не дало хорошего решения. Подводя итог: я хочу, чтобы боковая панель заняла второе место в порядке документов; на настольных компьютерах я хочу, чтобы h2 очищал содержимое, но не боковую панель, а боковая панель находилась в верхнем правом углу под h1; на мобильных телефонах я хочу, чтобы контент и боковая панель были в движении.

Возможно ли это?

Answer 1

Как я понял задачу, вам нужно что-то вроде этого: http://jsfiddle.net/kizu/yDx9G/

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

На adactio.com есть две замечательные статьи об этой проблеме:

1. Статья о flexbox
2. Статья об использовании display:table для изменения порядка элементов

Answer 2

Рассматривали ли вы упаковку содержимого в контейнеры? Например:

<div id="content">
  <h1>Header</h1>
  <h2>sub-section</h2>
</div>

<div id="sidebar">
  variable height sidebar
</div>

Затем вы можете использовать позиционирование CSS, чтобы разместить их где угодно. Действительно простая версия:

#content {
  float: left;
}

#sidebar {
  float: right;
}

Как видно здесь .