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片段定位

回答

相关问题