css - 分区定位

Question

我有一个 div，在这个里面我需要另外 3 个 div:

• 1 在左边(css 中的 float:left 有助于定位它)

• 2 个在前一个的右边(一个在彼此的顶部)

  第一 第二部分
  DIV 第三个 DIV

(这样可能更清楚一点)

我无法定位它们。最后 2 个 div 位于第一个 div 之上:

<div id="header">
        <div id="logo">Logo goes here</div>
        <div id="caption">Caption</div>
        <div id="nav">Nav</div>
</div>

我的CSS:

#header {
  margin: 0 auto;
  width: 990px;
  height: 130px;
} 
#logo {
  position: relative;
  left: 10px;
  top: 10px;
  width: 289px;
  height: 110px;
  background: url("images/logo.png");
  float: left;
}
#caption {
  position: relative;
  left: 30px;
  top: 35px;
  font-size: 25px;
  color: #fff;
}
#nav {
  position: relative;
  left: 30px;
  top: 50px;
}

编辑:

我最终采用了这个解决方案:

#header {
  margin: 0 auto;
  width: 990px;
  height: 130px;
}
#logo {
  margin-top: 10px;
  margin-left: 0;
  width: 289px;
  height: 110px;
  background: url("/static/images/logo.png");
  float: left;
}
#caption {
  margin-top: 40px;
  margin-left: 20px;
  font-size: 25px;
  color: #fff;
  float:left;
}
#nav {
  margin-top: 20px;
  margin-left: 20px;
  float:left;
}

全部在 flaot:left 中，看起来没问题。这也是正确的方法吗？

Answer 1

试一试:

#header {
  margin: 0 auto;
  width: 990px;
  height: 130px;
      border: 1px solid #fff000;
} 
#logo {
  position: relative;
  left: 10px;
  top: 10px;
  width: 289px;
  height: 110px;
  border: 1px solid #fff000;
  float: left;
}
#caption {
  position: relative;
  float: right;
  width: 650px;
  font-size: 25px;
  color: #fff;
  margin: 10px 10px 10px 0;
      border: 1px solid #fff000;
}
#nav {
  position: relative;
  margin: 10px 10px 10px 0;
  float: right;
  width: 650px;
      border: 1px solid #fff000;
}

或在以下位置取峰:http://jsfiddle.net/rLcsy/