给予位置:绝对;对我的孩子有效

给予位置:绝对;对我的孩子有效

基于本文中描述的方法，我创建了.Less dynamic解决方案:

Html:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

少:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

要做到这一点，最简单的方法就是假装。《A List Apart》多年来对此进行了广泛的报道，比如Dan Cederholm 2004年的一篇文章。

我通常是这样做的:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

您可以通过将#container包装在另一个div中，将标题div嵌入为#container的兄弟，并将边缘和宽度样式移动到父容器中，轻松地在此设计中添加标题。此外，CSS应该移动到一个单独的文件，而不是保持内联等等。最后，clearfix类可以在positioniseverything上找到。

注意:此答案适用于不支持Flexbox标准的旧浏览器。有关现代方法，请参见:https://stackoverflow.com/a/23300532/1155721

我建议你看看跨浏览器CSS的等高列，没有黑客。

基本上，以浏览器兼容的方式使用CSS来实现这一点并不简单(但是对于表来说很简单)，所以请找到一个适当的预打包解决方案。

同样，答案也取决于你想要100%的高度还是相同的高度。通常都是等高的。如果是100%高，答案就略有不同。

我可能有点晚了，但我找到了一个周围的工作，可能是一个hack。 首先给父层一个弯曲和100vh的高度

就像这样:

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;/* Can be less depends on the container, basically this forces the element to expand */
}