为什么我的sidepanel不能在div的顶部浮动？

我的侧面板不能正确浮动。它的行为（出于某种原因）好像有一个顶部边距，它拒绝在页面标题旁边对齐。为什么我的sidepanel不能在div的顶部浮动？

我还试图使它响应使用<aside>

它应该是在这里：

我的主要内容坐在一个max-width:1050px的rowSidepanel应的width:60%列，我认为sidebar也会在pageArea之内制作一列width:27%; float:right;。

我检查了元素，并试图强制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; 
     } 
    }

来源

2016-11-28 cmp

您可能希望将“HTML5标记你的问题是由于使用了”添加

你.rowSidepanel显示块，没有他的宽度而论，他被指定为所有屏幕。只要让他浮动：左边;

.rowSidepanel { 
width: 60%; 
float: left; 
}

来源

2016-11-28 19:09:58 codexy

完美！谢谢！ – cmp

你#breadcrumb，曲目标题，和段落元件都是块元件，并且因此占用了浏览器的整个宽度（并推下你的侧边栏）。

您应该将这些其他元素分组到他们自己的容器div中并保留流程。将背景颜色应用于两个div（左侧浮动和右侧浮动）以可视化您正在做的事情。

来源

2016-11-28 19:09:32

尝试在#sidebar之前更改div顺序，#rowSidepanel。

http://codebins.com/bin/4ldqosu

来源

2016-11-28 19:09:42 circusdei

谢谢！这并不工作，但后来当媒体询问踢，它位于上方主列，而我在下面需要它。谢谢你的帮助:-) – cmp

NP ...尝试上面的浮动修复程序 – circusdei

为什么我的sidepanel不能在div的顶部浮动？

回答

相关问题