Question

我有一个div，在这个中我需要另外3个div：

1（浮动：css左侧有助于定位）
2在前一个的右边（一个在另一个的顶部）

FIRST SECOND DIV
DIV THIRD DIV

（也许这样清楚一点）

我无法定位他们。我最终将最后两个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;
}

所有的声音：左边，似乎没问题。这也是一个正确的方法吗？

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/

取得巅峰

Answer 2

浮动可能很棘手......我认为Learn CSS Positioning in Ten Steps上的第5步就像是一个开始的地方......

最近我刚刚放弃摆弄并开始使用blueprint css framework（至少作为起点）。它可能非常适合您的应用程序。

Answer 3

您必须添加另一个div以包含正确的两个。

<div class="container">
<div style="float:left">
left
</div>
<div style="float:right">
   <div>right top</div>
   <div>right bottom</div>
</div>
</div>

像这样的东西

Answer 4

标题应该使用相对定位;其他人应该使用绝对定位，然后检查你的左和顶值

Answer 5

如果你将#logo浮动到左边，＃caption和#nav将占用剩余的水平空间，默认情况下在#nav上方使用#caption堆叠。这不是你想要的吗？

通过“相对化”他们的立场，你只是打破了自己已经发挥作用的东西。如果你需要在div之间添加一些间距，最好使用边距和填充。请记住，相对定位会将div从默认位置移开，但是围绕它的元素的流动就像div在它的位置一样。

因此，总而言之，请尝试删除（或注释掉）三个div的position，left和top属性（如果要添加空格，请添加填充和边距））。

Answer 6

你需要包装你的第二个和第三个div然后浮动......就像这样......

<div id="header">
    <div id="logo" style="float:left;">Logo goes here</div>
    <div style="float:right;">
      <div id="caption">Caption</div>
      <div id="nav">Nav</div>
    </div>
    <!-- Adding the clear div makes sure you don't accidentally pass float to other elements -->
    <div style="clear:both;"></div>
</div>

我知道你有浮动：留在你的css定义的徽标ID;但我把它放在元素上，以明确表示什么是/不是浮动。在考虑漂浮时;只是把它想象成一种但不完全像使用跨度。你基本上采用一个块元素并将其转换为内联元素。因此，如果您希望两个元素是内联的，那么您必须浮动两个元素;而不是一个。请记住，浮动元素的呈现方式仅与要浮动的元素的SIBLINGS相关。

Div定位

6 个答案: