[英]Why won't my sidepanel float right at the top of a div?
我的侧面板无法正确浮动。 (由于某种原因)它的作用好像是有一个上边距,它拒绝在页面标题旁边对齐。
我还尝试使用<aside>
使其响应
应该在这里:
我的主要内容位于max-width:1050px
, rowSidepanel
应该使width:60%
的列,我认为sidebar
也将使width:27%; float:right;
的列width:27%; float:right;
width:27%; float:right;
全部在该pageArea
。
我检查了element并试图强制top:0;
等,但它仍然没有表现出来。
有人知道我在做什么错吗? 。
的HTML
<div id="pageArea">
<div class="colPad">
<div class="rowSidepanel">
<!-- InstanceBeginEditable name="main content" -->
<div class="breadCrumb"> <a href="/">Home</a> <span style="font: Georgia;"> > </span> Repertoire</div>
<h1>Repertoire</h1>
<p class="introPara">Intro</p>
<p>Main content....</p>
<!-- InstanceEndEditable -->
</div>
<aside id="sidebar">
<div class="sidepanelArea"> Sidepanel </div>
</aside>
</div>
</div>
<div class="clearBoth"></div>
的CSS
#pageArea {
max-width: 1050px;
margin: 0px auto 0px auto;
padding: 134px 0px 0px 0px;
display: block;
background-image:url("/images/common/centered-page-bg.jpg");
background-repeat: no-repeat;
background-position: 0% 12%;
min-height: 667px;
z-index: 1;
overflow: hidden;
position: relative;
}
.colPad {
padding: 0px 15px 0px 15px;
}
.rowSidepanel {
width: 60%;
}
aside {
float: right;
padding: 1%;
width: 27%;
margin: 0% 0px 20px 0px;
background-color:#000;
color: white;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
@media all and (max-width : 799px) {
#sidebar {
width: 99%;
padding: 1% 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-top: 3px solid #dc1b20;
background-color: #FFF;
color: black;
}
}
您的.rowSidepanel显示为块状,无论他的宽度多大,他都被分配为在所有屏幕上显示。 只是让他漂浮:离开;
.rowSidepanel {
width: 60%;
float: left;
}
您的#breadcrumb,曲目标题和段落元素都是block元素,因此占用了浏览器的整个宽度(并按下侧边栏)。
您应该将那些其他元素分组到它们自己的容器div中,然后将剩余的流分类。 将背景颜色应用于两个div(一个向左浮动,另一个向右浮动),以可视化您的工作。
尝试更改div顺序,即#sidebar之前的#rowSidepanel。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.