正如你在下面的CSS中看到的,我希望child2在child1之前定位自己.这是因为我正在开发的网站也应该在移动设备上运行,其中child2应位于底部,因为它包含我想要的导航,在移动设备上的内容之下. - 为什么不是2个主页?这是在整个HTML中重新定位的唯一2个div,因此这个微小变化的2个主页是一种矫枉过正.
HTML:
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
Run Code Online (Sandbox Code Playgroud)
child2具有动态高度,因为不同的子网站可以具有更多或更少的导航项.
我知道绝对定位元素已从流中移除,因此被其他元素忽略.
我尝试设置child2父div,但这没有帮助,clearfix也没有.
我的最后一招将是javascript来相应地重新定位两个div,但是现在我将尝试看看是否存在这样做的非javascript方式.