Question

大约10年前我被介绍给HTML，但直到大约一个月前才再次使用它。事实证明我现在应该采取不同的做法（或者在不知情的情况下做错事），而且我正在努力坚持标准，但有些事情让我很烦恼。

我一直听到很多人为了布局而抨击桌子的用法。我真的不知道为什么（表真的那么糟糕吗？），但我仍然尝试使用div而不能让它们正常工作。我已经将我的问题分解为一个非常具有说明性的问题，其中涉及一些我无法用div做的事情（还有一些我实际上甚至无法对表做过）。

问题在于：

My output

我尝试了很多东西，遗憾的是我甚至无法在这里总结它们，因为我不记得了，但这是我试图让它工作的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Tests</title>
<style type="text/css">
body {height:100%;}
#container
{
    overflow: hidden;
    width:680px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    border: 1px solid red;
}
#column_left
{
    float: left;
    width: 25%;
    height: 100%;
    margin: 0;
    text-align: right;
    border: 1px solid black;
}
#column_middle
{
    float: left;
    width: 49.2%;/*59.601562%*/
    height: 100%;
    margin: 0;
    text-align: center;
    border: 1px solid black;
}
#column_right
{
    float: left;
    width: 25%;
    height: 100%;
    margin: 0;
    border: 1px solid black;
}
.pad 
{
    margin: 10px;
    padding: 2px;
    border: 1px solid black;
}
</style>
</head>
<body style="margin:0;">
<div id="container">
    <div id="column_left">
        <div class="pad">
            Left Column Top<br/>
            <br/>
            Div only as long as content.<br/>
        </div>
        <div class="pad">
            Left Column Bottom<br/><br/>
            I want this DIV to stretch all the way down to the bottom of the container regardless of the lenght of the content.
        </div>
    </div>
    <div id="column_middle">
        <div class="pad">
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
        </div>
    </div>
    <div id="column_right">
        <div class="pad">
            Right content<br/><br/>
            I want this DIV to stretch all the way down to the bottom of the container regardless of the lenght of the content.
        </div>
    </div>
</div>
</body>
</html>

除了主要问题，如果你注意中间栏的宽度，它不是50.我首先尝试50％，当然，总结100％，但由于一些疯狂的原因，一切都搞砸了：

Distorted layout

有谁知道为什么？

我不能用表做什么，甚至不知道它是否可能：我希望整个布局是对称的。也就是说，我希望更长的内容来确定其div的宽度，以及另一个div的宽度，而中间div则伸展以适应页面的100％。有谁知道这是否可能？不确定我是否真的在我的最终布局中使用它，但它令我感到困惑。

很抱歉，如果问题很愚蠢，结果很容易解决。就像我说的，我是适合html / css的新手。任何帮助表示赞赏。

Answer 1

好的，所以想到了它的一部分。您的边框是某些浏览器中指定宽度的补充。通过将中间div降低到49％，它修复了在IE8 / IE7 / FF4下面推入的正确div。以下是它的实际应用：JsFiddle

Answer 2

将容器的宽度从680增加到750正在工作....

如何将布局从表格更改为具有适当宽度和高度的div？

2 个答案: