爲什麼我的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的頂部浮動？

回答

相關問題