Question

我在包装器中有3个div。我希望他们中的两个坚持左上角，他们需要在彼此之下。第三个div需要坚持到右上角，但不会坚持到顶部。

我尝试这样做但失败了： http://jsfiddle.net/TZ82X/

<div id="wrapper">
  <div id="logo">Logo</div>
  <div id="motto">Motto</div>
  <div id="nav">Navigation</div>
</div>

CSS：

#wrapper {
  background: #CCC;
  width: 500px;
  height: 250px;
  margin: auto;
}
#logo {
  background: tomato;
  width: 300px;
  height: 20px;
  float: left;
}
#motto {
 background: sienna;
  width: 300px;
  height: 20px;
  float: left;
  clear: left;
}
#nav {
  background: seagreen;
  width: 200px;
  height: 40px;
  float: right;
}

这是在.html重新排列div的第一个修复： http://jsfiddle.net/KJG9q/

<div id="wrapper">
  <div id="nav">Navigation</div>
  <div id="logo">Logo</div>
  <div id="motto">Motto</div>
</div>

这是另一个容器div的第二个修复： http://jsfiddle.net/x98Mf/

<div id="wrapper">
  <div id="logo-motto-container">
    <div id="logo">Logo</div>
    <div id="motto">Motto</div>
  </div>
  <div id="nav">Navigation</div>
</div>

CSS：

#logo-motto-container {
  float: left;

我不想在.html中重新排列元素，因为我希望它们能够正确地安排移动设备的样式，我可以使用另一个包装div但是我想知道为什么第一种方法不起作用，如果有的话修复它而不弄乱.html并保持模板灵活（没有位置：相对）？

Answer 1

从float: right;删除#nav。

#nav {
    background: seagreen;
    width: 200px;
    height: 40px;
}

Answer 2

我修改了你的小提琴，以便为你提供你想做的事。

以下链接是您的第一个修复小提琴的修改版本。我刚刚玩过css属性而没有移动任何你想要的html div。

Fiddle Link

#nav {
    background: seagreen;
    width: 100%x;
    height: 40px;    
}

Answer 3

#nav {
    background: seagreen;
    width: 200px;
    height: 40px;
    float: right;
    position: absolute;
}

浮动元素不会粘贴到父包装div的顶部

3 个答案: