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列太宽

回答

相关问题