Html 带填充的等高柱_Html_Css_Padding

Html 带填充的等高柱

html css

Html 带填充的等高柱,html,css,padding,Html,Css,Padding,嘿。我有以下标记： <!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 typ

嘿。我有以下标记：

<!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>

问题是，左列没有显示。但是，如果我从内容中删除了填充，并从左侧的右侧值中减去10，则除了内容中缺少的填充之外，它是有效的。有没有办法在没有任何额外标记的情况下修复此问题？我已经看到了这个解决方案：

但我想把包装纸的数量控制在最低限度…：

我认为你的链接更多的是对这一点的解释：

虽然这篇文章对3根等高柱的注意事项和问题进行了更深入的讨论

此网站可能会帮助您：

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

我想他甚至会以每小时50欧元的价格做这项工作。我以前雇用过他，他很快。

剩下的利润率的目的是什么：-100%；？假设这是针对等高列的，虽然在本例中，左列没有显示链接中包装的全部内容是为了使等高列具有可见性，这是罪魁祸首。包装器为您的专栏提供背景。如果没有这个技巧，就无法仅在CSS中使具有流体内容的列具有相同的高度。