CSS 3柱流體佈局問題，第3列太寬

我一直試圖通過以下http://www.alistapart.com/articles/holygrail/（左300px固定，中心流體，右300px固定）實施3柱流體佈局，由於某種原因，第三列吹在佈局的右側。CSS 3柱流體佈局問題，第3列太寬

這裏就是我想要什麼VS我越來越：http://i.stack.imgur.com/qFVVP.png

上午在Linux Chrome和FF測試它 - 無論是最新的穩定版本。

我的CSS是：

#home { 
    min-width:900px; 
    font-family: arial; 
    font-size: 12px; 
    color: #565656; 
} 

/* Main Page Divisions */ 

#page-top { 
    height: 120px; 
    background-color: #ffffffff; 
} 

#page-middle { 
    height: 250px; 
    background-color: #6AC0EB; 
    float:left; 
    width:100%; 
    padding-left: 300px; /* LC width */ 
    padding-right: 300px; /* RC width */ 
} 

#page-middle .column { 
    position: relative; 
    float: left; 
} 

#page-bottom { 
    clear:both; 
    height: 300px; 
    background-color:#EDEDED; 
    overflow:scroll; 
} 

/* Middle Page Divisions */ 

#page-middle-centre { 
    width:60%; 
} 

#page-middle-left { 
    width: 300px;   /* LC width */ 
    right: 300px;   /* LC width */ 
    margin-left: -60%; 
} 
#page-middle-right { 
    width: 300px;   /* RC width */ 
    margin-right:-300px; /* RC width */ 
    background: #FDE95E; 
} 

/* Bottom Page Divisions */ 

#page-bottom-left { 
    width: 49%; 
    float:left; 
    text-align: right; 
} 

#page-bottom-right { 
    width: 49%; 
    float:right; 
    text-align: left; 
} 

h2 { 
    font-family: "Quicksand"; 
    font-size: 130%; 
} 

h1#title-block { 
    font-family: "Quicksand"; 
    font-size: 3em; 
    color: #FFFFFF; 
    letter-spacing:-3px; 
}

而我的HTML如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Test Layout</title> 
    <link rel="stylesheet" type="text/css" href="reset.css" /> 
    <link rel="stylesheet" type="text/css" href="test.css" /> 
    <!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 

<body id="home"> 


    <div id="page-top"> 
    This is the header 
    </div> 


    <div id="page-middle"> 

    <div id="page-middle-centre" class="column"> 
     middle section middle section middle section middle section middle section middle section middle section middle section 
    </div>  

    <div id="page-middle-left" class="column"> 
      <h1 id="title-block">Title Block</h1> 
      <p id="quicksand">Menu 1 | Menu 2 | Menu 3 | Menu 4</p> 
    </div> 

    <div id="page-middle-right" class="column"> 
     Right section Right section Right section Right section Right section Right section Right section Right section 
    </div> 
    </div> 

    <div id="page-bottom"> 
    This is the footer 
    </div> 
</body> 
</html>

來源

2011-02-27 mwan

出於某種原因，寬度：在頁面中間元素100％是導致它...

#page-middle { 
    height: 250px; 
    background-color: #6AC0EB; 
    float:left; 
    width:100%; <---------------- 
    padding-left: 300px; /* LC width */ 
    padding-right: 300px; /* RC width */ 
}

一旦它被刪除，一切都對齊。我不太清楚我理解這背後的邏輯，但至少它是固定的。

來源

2011-02-27 04:43:55 mwan

原因在這裏：w3c盒模型。在此模型中，實際寬度=填充+內容寬度+邊框寬度，所以＃page-middle中的實際寬度爲父寬度的+ 100％+ padding-left + padding right [引用]（http://css-tricks.com/箱上漿/） – vincicat 2011-03-01 17:51:18

在你的HTML你列的div是順序：

左列
中心列
右列

您正在使用的alistapart網站的例子有其列的順序：

中心柱
左列
右列

切換這些，它可能正常工作。祝你好運！

來源

2011-02-27 03:18:08

我實際上已經有了這個，並且複製了不正確的版本 - 我編輯了我的代碼來反映。任何其他想法？這讓我瘋狂！ – mwan 2011-02-27 04:19:50

CSS 3柱流體佈局問題，第3列太寬

回答

相關問題