Question

我有一些DIV的CSS，

#wrapper {
  width:960px; 
  border:1px solid red;
  overflow:hidden;
}

#maintitle {
  width:600px;
  height:50px;
  float:left;
  border:1px solid #333;
}

#sidebar {
  clear:both;
  float:left;
  width:100px;
  height:200px;
  border:1px solid #ccc;
}

#rightSidebar {
  width:100px;
  height:200px;
  float:right;
  border:1px solid #CCC;
}

我认为#rightSidebar div会浮动到#wrapper div的右上角，但是，它会保持在#maintitle DIV的下方。

＃maintitle DIV向左浮动，然后允许#rightsidebar div浮动到右上角？

这里有效，http://jsfiddle.net/BdpU7/。

Answer 1

这是你的想法吗？ http://jsfiddle.net/BdpU7/1/

#rightSidebar需要在HTML中#sidebar之前，然后#sidebar必须拥有clear：

#wrapper {
    width:960px; 
    border:1px solid red;
    overflow:hidden;
}

#maintitle {
    width:600px;
    height:50px;
    float:left;
    border:1px solid #333;
}

#sidebar {
    clear:left;
    float:left;
    width:100px;
    height:200px;
    border:1px solid #ccc;
}

#rightSidebar {
    width:100px;
    height:200px;
    float:right;
    border:1px solid green;
}

<div id="wrapper">
    <div id="maintitle"></div>
    <div id="rightSidebar"></div>
    <div id="sidebar"></div>
</div>

有趣的CSS浮动

1 个答案: