Как вы можете видеть в CSS ниже, я хочу, чтобы child2
позиционировал себя перед child1
. Это потому, что сайт, который я сейчас разрабатываю, должен также работать на мобильных устройствах, где child2
должен быть внизу, так как он содержит навигацию, которую я хочу, под контентом на мобильных устройствах. - Почему бы не 2 шедевры? Это единственные 2 divs
, которые переставлены во всем HTML, так что 2 мастер-страницы для этого незначительного изменения - это перебор.
HTML:
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS:
parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
child2
имеет динамическую высоту, поскольку на разных дочерних сайтах может быть больше или меньше элементов навигации.
Я знаю, что элементы с абсолютным позиционированием удаляются из потока, поэтому другие элементы игнорируются.
Я попытался установить overflow:hidden;
в родительском div, но это не помогло, как и clearfix
.
Моим последним средством будет JavaScript для изменения положения этих двух divs
, но сейчас я попытаюсь выяснить, существует ли способ сделать это без использования JavaScript.