html - 侧边栏定位不正确

Question

基本上，我不明白为什么 不在右上角？它把自己定位在底部，尽管根据我的理解它应该在右上角？

详细代码见JSfiddle

http://jsfiddle.net/5JhMj/

#content section {
padding: 4%;
width: 70%;
float: left;
background-color: white;
margin-bottom:8%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;

aside {
width: 30%;
float: right;
background-color: green;

Answer 1

您正在围绕最后一个部分元素 float 侧边栏。

取而代之的是，将您的部分包裹在您漂浮的另一个容器周围。然后让你的侧边栏漂浮在那个新容器旁边。

<div class="container">
    <div class="section-container">
        <section>...</section>
    </div>
    <aside>
        ...
    </aside>
</div>

CSS

.section-container{
    width: 70%;
    float: left;
}

aside {
    width: 29%;
    float: right;
    background-color: green;
}   

fiddle : http://jsfiddle.net/5JhMj/2/