樂趣CSS花車

Question

我有以下CSS的一些div，

#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需要#sidebar之前走在HTML，然後#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>