CSS並排div

在下面的示例中，我試圖讓div「左」和「右」並排出現。顯然我的理解是有缺陷的，但是我犯了什麼錯誤，因爲（至少在Chrome中）它們並不是並排顯示的。CSS並排div

感謝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <style type="text/css" media="screen"> 
     body { 
       margin: 0; 
       padding: 0; 
       background: #ffffff; 
       text-align:center; 
      } 
      #container { 
       margin: 100px auto 100px auto; 
       padding: 0; 
       background: #eeeeee; 
       text-align:left; 

       width: 49.5em; 
      } 
      #title { 
       margin: 2em; 
       padding: 0; 
       background: dddddd; 

       width: 49.5em; 
      } 
      #graphics { 
       margin: 0; 
       padding: 0; 
       height:200px; 
       background: #cccccc; 

       width: 49.5em; 
      } 
      #navigation { 
       margin: 0; 
       padding: 0; 
       background: #bbbbbb; 

       height:3em; 
       width: 49.5em; 
      } 
      #wrapper { 
       margin: 0; 
       padding: 0; 
       background: #aaaaaa; 

       width: 49.5em; 
      } 
      #left, #right { 
       margin: 0; 
       padding: 0; 
       float: left; 
       background: #999999; 

       width: 41em; 
      } 
      #right { 
       margin: 1.5em 0 0 0.5em; 
       padding: 0; 
       float: right; 
       background: #888888; 

       width: 8em; 
      } 

      .clear { 
       margin: 0; 
       padding: 0; 
       height: 0; 
       font-size: 1px; 
       line-height: 0; 
       clear: both; 
      } 
      </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="title">Title</div> 
      <div id="graphics">Graphics</div> 
      <div id="menu">Menu Item</div> 
      <div id="wrapper"> 
       <div id="left"> 
        Left 
       </div> 
       <div id="right"> 
        Right 
       </div> 
       <div class="clear"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2011-09-26 James

的問題是，您所指定的1.5em邊距上#right。拿出來，它應該工作。這是一個working jsfiddle。從#right

來源

2011-09-26 17:41:38

刪除保證金

#right { 
    /* margin: 1.5em 0 0 0.5em;*/ 
    padding: 0; 
    float: right; 
    background: #888; 
    width: 8em; 
    }

http://jsfiddle.net/x5qaf/1/

來源

2011-09-26 17:42:14 Sanooj

這修復它爲我：

#left { 
    margin: 0; 
    padding: 0; 
    float: left; 
    background: #999999; 
    width: 41em; 
} 

#right { 
    /* margin settings moved the box*/ 
    padding: 0; 
    float: right; 
    background: #888888; 
    width: 8em; 
}

來源

2011-09-26 17:45:04 dnagirl

回答

相關問題