DIV的布局的一个问题

问题描述：

我有一个HTML文件中像这样（我只把页面的主体）：DIV的布局的一个问题

<body> 
    <form id="form1" runat="server"> 
    <div class="divBody"> 
     <div id="divHeader"> 
     </div> 
     <div id="leftColumn"> 
     Welcome! 
     </div> 
     <div id="rightColumn"> 
     </div> 
    </div> 
    </form> 
</body>

而且它的CSS文件中包含的：

.divBody { 
    border-style: dotted; 
    border-width: medium; 
    margin: 0 auto; 
    width: 1024px; 
    height: 768px; 
    position: relative; 
} 
#divHeader { 
    width: 100%; 
    height: 70px; 
    background-color: #000000; 
} 
#leftColumn { 
    width: 33%; 
    height: 100%; 
    background-color: #FF0000; 
    float: left; 
} 
#rightColumn { 
    width: 66%; 
    height: 100%; 
    background-color: #00FF00; 
}

我想标题和两列。标题是好的，但列大于divBody的高度，rightColumn不符合divBody宽度的66％。

发生了什么事？

谢谢。

这可能有助于了解哪些浏览器正在向您提供问题。 – JasCav 2009-12-22 18:38:20

Firefox 3.5.6和Internet Explorer 8. – VansFannel 2009-12-22 18:50:28

答

您的标题已修复height: 70px;并正在向下推动列。您可以添加填充到divBody来解决此问题：see it in action。

您还必须制作右栏float，否则它位于左栏而不是右栏。

您应该依靠Blueprint或YUI 2: Grids。如果你不喜欢CSS框架，那么还有其他好的资源，比如multi-column liquid layouts。

注：我不知道这是你的意思，但33％+ 66％== 99％，因此差距。

非常感谢您的帮助。我已经改变了66％，67％。 – VansFannel 2009-12-22 19:09:13

答

我认为你需要添加浮动权的rightColumn：

#rightColumn { 
    width: 66%; 
    height: 100%; 
    background-color: #00FF00; 
    float: right; 
}

至于列的高度：我想这是因为相对布局。为了使柱的高度配合得非常完美，你可以计算像素的确切数目，像这样：

#leftColumn { 
    width: 33%; 
    height: 698px; 
    background-color: #FF0000; 
    float: left; 
} 
#rightColumn { 
    width: 66%; 
    height: 698px; 
    background-color: #00FF00; 
    float: right; 
}

（车身的高度 - 头部高度= 768 - 70 = 698）

但这在身体变大的情况下柱体不能垂直生长的缺点。

另一种方法是保持列100％，但将它们粘贴到身体的顶部。你必须给他们相对的定位来做到这一点。此外，你必须解除他们笔账由标题中获取个空：

#leftColumn { 
    width: 33%; 
    height: 100%; 
    background-color: #FF0000; 
    float: left; 
    top: -70px; 
    position: relative; 
} 
#rightColumn { 
    width: 66%; 
    height: 100%; 
    background-color: #00FF00; 
    float: right; 
    top: -70px; 
    position: relative; 
}

太棒了！有用！但是现在我有左右栏的问题比divBody大。 – VansFannel 2009-12-22 18:49:33

答

如果您正在寻找这样的事情，我会强烈建议使用YUI Grids。他们已经完成了提供布局（跨浏览器）的工作，而且您只需填充数据即可。非常容易使用，非常好（和设置类似于你的）。

答

我想这可能会帮助您：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

您不必使用网格系统并没有使用任何额外的JavaScript或CSS黑客。

DIV的布局的一个问题

相关推荐