css - 如何将 div 直接定位在它的同级下方(不使用固定坐标)？

Question

我有以下 html:

<div id="container">
    <div id="pageHeader">
      <h1><span>Page Title</span></h1>
    </div>

    <div id="navigation_menu">
      <ul>
        <li id="treeslink"><a href="#">Trees</a></li>
        <li id="gardenslink"><a href="#">Gardens</a></li>
        <li id="portlink"><a href="#">Portfolio</a></li>
      </ul>
    </div> 
  </div>

我想将 navigation_menu 直接放在 pageHeader 的下方。

所以我的 .css 中有这个:

#container {width:870px; margin:0 auto;position:relative;}

#pageHeader h1 
{
  position:absolute;
  width:870px;  
  margin-top:0;
  font:74px "F25_TypewriterCondensed";
  letter-spacing:-2px;
}

#navigation_menu
{
  position:absolute;
  width: 169px;
}

但是 navigation_menu 只是出现在 pageHeader 之上，在 container 的左上角。有没有可能把它放在下面？

Answer 1

我不明白你为什么要使用绝对定位。您所追求的实际上是默认行为。我将你的 CSS 更新为:

#container 
{
   width:870px; 
   margin:0 auto;
}

#pageHeader h1 
{

  margin-top:0;
  font:74px "F25_TypewriterCondensed";
  letter-spacing:-2px;
}

#navigation_menu
{
  width: 169px;
}​

检查 fiddle 以查看实际代码:http://jsfiddle.net/ebgVq/