2 cols，1固定，其他液體？（困境）

任何人都可以向我解釋這段代碼，因爲它似乎擊敗了我的邏輯？2 cols，1固定，其他液體？（困境）

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title> 
<style type="text/css"> 
    body{ 
     background-color:#000; 
     padding: 0; 
     margin: 0; 
    } 
    #main{ 
     width:70%; 
     min-width:300px; 
     height:500px; 
    } 

    #colWr{ 
     width:100%; 
     height:500px; 
     float:left; 
    } 

    #col{ 
     height:inherit; 
     background-color:#900; 
     margin-left:200px; 
    } 

    #left{ 
     height:inherit; 
     background-color:#9C3; 
     float:left; 
     width: 200px; 
     margin-left: -100%; 
    } 

</style> 
</head> 
<body> 
<center> 
<div id="main"> 
    <div id="colWr"> 
     <div id="col"></div> 
    </div> 
    <div id="left"></div> 
</div> 

</center> 
</body> 
</html>

我的問題依賴於#left持有保證金左事實：-100px屬性，主要專區內div的位置表明，左邊一列寧願是右列，爲什麼是「col」列浮動到「colWr」div內的左側？

對於1_fixed-1_liquid css佈局，代碼是相當扭曲的。

來源

2012-03-18 Andrew G.H.

http://www.alistapart.com/articles/negativemargins/ - 雖然個人，我想要導航上面的內容在DOM中，並不會這樣做。大多數現代瀏覽器都可以使用更簡單的CSS，即將側邊欄左側浮動，給它一個固定的寬度，然後使內容具有比側邊欄寬度稍大的左邊距，以便它位於右側。 – tvanfosson 2012-03-18 18:32:27

+ +1爲我使用的最佳解決方案。僅浮動邊欄並在內容上留下左邊距。 – rcdmk 2012-03-18 18:56:08

的div的順序並不重要，因爲colWr有100%的寬度，這意味着什麼浮動後，它會出現在一個新的生產線，無論如何，如果左欄是先會強制到一個新的colWr列線，它將不得不被給予一個負邊界。 left div具有100％的負利差，這使其回到colWr之上。

至於爲何頁面被計劃了這種方式我不知道，同樣的效果可能只是通過把left旁邊col股利和去除colWr格爲容易實現（沒有做任何傷害，但它沒有用途）。

您還應該注意，HTML中的center標記已被棄用，並且我建議您通過在其css margin: auto中指定中心div。該代碼還缺少在大多數瀏覽器中觸發標準模式所需的DOCTYPE declaration - 您可以找到有關瀏覽器模式here的更多信息。

我的懷疑是你寫的代碼是在約會HTML 4.01的發佈之前寫的。它可以在大多數瀏覽器中使用，因爲它們的傳統支持，但這並不意味着它運行良好，我不會使用它。我會然而使用這個：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Test CSS Lay 2 col, 1 fix 1 fluid</title> 
     <style type="text/css"> 
      body{ 
       background-color:#000; 
       padding: 0; 
       margin: 0; 
      } 
      #main{ 
       width:70%; 
       min-width:300px; 
       height:500px; 
       margin: auto; 
      } 

      #col{ 
       height:inherit; 
       background-color:#900; 
       margin-left:200px; 
      } 

      #left{ 
       height:inherit; 
       background-color:#9C3; 
       float:left; 
       width: 200px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="main"> 
      <div id="left"></div> 
      <div id="col"></div> 
     </div> 
    </body> 
</html>

來源

2012-03-18 18:32:11

2 cols，1固定，其他液體？ （困境）

回答

相關問題

2 cols，1固定，其他液體？（困境）