HTML CSS片段定位

我需要#infoBar div和#actualCover div坐在#covers div的右邊（旁邊），但由於某些原因，覆蓋div的行爲就像它甚至不在那裏，並漂浮在頂部其他divs。HTML CSS片段定位

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Untitled Page</title> 
     <style type="text/css"> 
      * 
      { 
       margin: 0; 
       padding: 0; 
      } 
      #chooserContainer 
      { 
       border: solid 1px orange; 
      } 
      #coverArea 
      { 
       border: solid 1px red; 
       width: 760px; 
      } 
      #covers 
      { 
       width: 150px; 
       float: left; 
       height: 600px; 
       overflow-y: auto; 
       overflow-x: hidden; 
       border: solid 2px #BFDEFF; 
       padding: 10px; 
       background-color: #F0F7FF; 
       margin-right: 30px; 
      } 
      #infoBar 
      { 
       height: 30px; 
       border: solid 1px green; 
       width: 600px; 
      } 
      #actualCover 
      { 
       width: 794px; 
       height: 1123px; 
       background-position: top left; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="chooserContainer"> 
      <div id="covers"> 
      </div> 
      <div id="infoBar"> 
      </div> 
      <div id="coverArea"> 
       <div id="actualCover"> 
       </div> 
      </div> 
      <div style="clear: both;"></div> 
     </div> 
    </body> 
</html>

來源

2009-09-14 Vince Panuccio

在這裏你去。

作爲一種良好的習慣，在設置填充和邊距之前，先讓佈局正確。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
     * 
     { 
      margin: 0; 
      padding: 0; 
     } 
     #chooserContainer 
     { 
      background: #ccc; 
      width: 911px; 
     } 

     #covers 
     { 
      width: 150px; 
      float: left; 
      height: 600px; 
      overflow-y: auto; 
      overflow-x: hidden; 
      background-color: #0ff; 
     } 
     #infoBar 
     { 
      height: 30px; 
      width: 600px; 
      float: right; 
      background: yellow; 
     } 
     #coverArea 
     { 
      width: 760px; 
      float: right; 
      background: #f60; 
     } 
     #actualCover 
     { 
      width: 794px; 
      height: 600px; 
     } 
    </style> 
</head> 
<body> 
    <div id="chooserContainer"> 
     <div id="covers">Coveres 
     </div> 
     <div id="infoBar">InfoBar 
     </div> 
     <div id="coverArea">CoverArea 
      <div id="actualCover">ActualCover 
      </div> 
     </div> 
     <div style="clear: both;"></div> 
    </div> 
</body> 
</html>

來源

2009-09-14 20:37:17

在這種情況下，這聽起來像你想#infoBar和#coverArea浮到#covers而不是#covers浮於其他兩個左右。

嘗試採取浮離的#covers並添加float: right;到#infoBar和#coverArea

來源

2009-09-14 13:08:01

，這似乎不:-( – 2009-09-14 13:12:02

工作沒有改變它在所有的行爲？ – 2009-09-14 13:21:54

確實這樣做了，事情wen't瘋了。你提到的兩個div走到最右邊和下面的蓋格 – 2009-09-14 13:25:38

HTML CSS片段定位

回答

相關問題