Question

嘿。我有以下标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
*
{
    padding: 0;
    margin: 0;
}

#container 
{
    padding-left: 200px;
    padding-right: 10px;
    overflow: hidden;
}

.column
{
    float: left;
    position: relative;
    text-align: justify;
    margin-bottom: -2000px;
    padding-bottom: 2005px;
}

#top 
{
    background-color: Red;
    height: 30px;
}

#content 
{
    background-color: Green;
    width: 100%;
    padding: 0 5px;
}

#left 
{
    background-color: Blue;
    width: 200px;
    right: 210px;
    margin-top: -30px;
    margin-left: -100%;
}
    </style>
</head>
<body>
    <div id="container">
        <div id="top">
            Lorem ipsum blah blah blah
        </div>
        <div id="content" class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
        </div>
        <div id="left" class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
        </div>
    </div>
</body>
</html>

问题是，左栏没有出现。但是，如果我从#content中删除填充（并从＃left的右值中减去10），它将起作用，除了#content上缺少的填充。有没有办法解决这个没有任何额外的标记？我见过这个解决方案：

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

但我想将包装纸的数量保持在最低限度......：）

Answer 1

我认为您的链接更多是对此的解释：

http://www.positioniseverything.net/articles/onetruelayout/equalheight

虽然这篇文章对3个等高柱的警告和问题进行了更深入的讨论。

Answer 2

此网站可能会帮助您： http://www.cssplay.co.uk/layouts/threecol.html

他的整个网站值得一看你以前从未想过的CSS创意。

我认为他甚至会以每小时50欧元的价格完成工作。我过去雇了他，他很快。

带衬垫的等高柱

2 个答案: