Question

我希望我的页面有3个块：左中心。我希望块LEFT和RIGHT大约150px宽，而块CENTER只填充其余的空间。每个块之间有10px的间隙。这是我的尝试：

#left {
    float: left;
    margin-top: 2px;
    padding-left: 3px;
    width: 150px;
    height: 800px;
    color: black;
    background-color: #cccccc;
}

#right {
    float: right;
    margin-top: 2px;
    padding-left: 3px;
    width: 150px;
    height: 800px;
    color: black;
    background-color: #cccccc;
}

#center {        
    margin: 2px 160px 0 160px;
    padding-left: 3px;
    height: 800px;
    background-color: yellow;
}

如果我没有#center，则左侧和右侧（灰色）块看起来很棒。但是当我尝试用黄色块填充中心的白色空间时，它会搞砸。我再也看不到我的右边挡了。

Answer 1

我相信你所描述的被称为“圣杯布局”（有充分理由！）请参阅http://www.alistapart.com/articles/holygrail上的好文章或谷歌“CSS圣杯布局”了解更多。

Answer 2

此解决方案适用于所有标准浏览器（IE7及更高版本，firefox，chrome，opera，safari）。（如果您必须支持IE6，我可以提供更新的示例）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Example</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
#MainContainerPanel
{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
}
#LeftPanel
{
    position:absolute;
    left:0px;
    top:0px;
    bottom:0px;
    width:150px;
    overflow:auto; /* change to hidden if you dont want scrolling */
    background-color:red; /*to clarify layout is working*/
}
#CenterPanel
{
    position:absolute;
    left:160px;
    right:160px;
    top:0px;
    bottom:0px;
    overflow:auto; /* change to hidden if you dont want scrolling */
    background-color:green; /*to clarify layout is working*/
}
#RightPanel
{
    position:absolute;
    right:0px;
    top:0px;
    bottom:0px;
    width:150px;
    overflow:auto; /* change to hidden if you dont want scrolling */
    background-color:blue; /*to clarify layout is working*/
}

</style>
</head>
<body>
    <div id="MainContainerPanel">
        <div id="LeftPanel">This is the left panel</div>
        <div id="CenterPanel">This is the center panel</div>
        <div id="RightPanel">This is the right panel</div>
    </div>  
</body>
</html>

Answer 3

最简单的方法是使用绝对定位：

#left
{
    width:150px;
}

#center
{
    left:150px;
    right:150px;
}

#right
{
    right:0px;
    width:150px;
}

请注意，所有方框的父级必须为position:relative，因为绝对位置相对于第一个position:relative祖先（或body如果没有...或者实际上可能html。我不确定。浏览器窗口，至少）。但是，有理由不使用绝对定位，因此在您的特定情况下这可能不起作用。例如，列不会都是相等的高度（除非您明确绑定高度），因此如果您想要列上的不同背景，这可能看起来不正确。此外，跨浏览器兼容性肯定是一个问题。

使用CSS实现3个块

3 个答案: