侧栏不正确定位

html
css

2014-01-15 143 views 0 likes

基本上，我不明白为什么不在右上角？它将自己定位在底部，即使按照我的理解，它应该位于右上角？侧栏不正确定位

见的jsfiddle详细代码

#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;

}

来源

2014-01-15 vplusm

的ISSE开始在你的HTML - >既然你有之前'aside'元素的元素，这最后一个只显示后。你可以** 1）**将'position：absolute'添加到''aside'元素或者** 2）**改变你的HTML布局。 – fiskolin

回答

你漂浮在你的最后一节元素侧边栏。

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

<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; 
}

小提琴： http://jsfiddle.net/5JhMj/2/

来源

2014-01-15 10:59:43 thpl

简单的办法就是section

之前把你放在一边

像

<div class="container"> 
<aside> 
<h1>placeholder</h1> 
</aside> 
<section> 
... 
...

Working Fiddle

来源

2014-01-15 10:56:59

侧栏不正确定位

回答

相关问题