html - 如何使用 CSS 垂直对齐 div 容器？

Question

我正在寻找一个通用且完整的解决方案来解决这个常见问题!我有这样的 HTML 代码:

<div id="CONTAINER">
    <div id="CONTAINER_LEFT"></div>
    <div id="CONTAINER_RIGHT"></div>
    <div id="CONTAINER_CENTER"></div>
</div>

我想编写 CSS，让我可以垂直对齐内部 div 元素，以便它们的顶部边缘对齐。其他注意事项:

1. Left 和 Right 容器具有固定宽度。
2. Center 容器必须填充 Left 和正确的容器。
3. 每个内部容器的高度取决于它的内容容器之间也有所不同。
4. 无意重叠，目标如下图片。
5. 外容器的高度应等于最大高度内部容器，如果可能的话!!

颜色只是为了展示想法!

我使用了“ float :左；”和“ float :正确；” Right 和 Left 容器的属性，但如果 Center 容器的内容太多，则此容器的区域会填满 float 元素下方的空间!此外，我需要在根容器下方添加一个宽度为 100% 的页脚；任何解决方案都应考虑这一点!

Answer 1

这很容易做到 - http://jsfiddle.net/spacebeers/dBvXY/2/

这使用此处概述的等高 CSS 列技术 - http://www.ejeliot.com/blog/61

您将主列设置为具有大量底部填充和相等的负底部边距。您的容器需要将溢出设置为隐藏。相应地调整数字，但引用 Brain Fantana 的话“60% 的时间它每次都有效”。

.container {
    width: 100%;
    overflow: hidden;    
}

.left{
    float: left;
    padding: 0px 10px 0px 0px;
    width: 90px;
    background: red;
}

.middle{
    top: 10px;
    margin-left: 100px;
    margin-right: 100px;
    background: green;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

.right{
    float: right;
    background: blue;
    padding: 0px 10px 0px 10px;
    width: 90px;
}​

<div class="container">
    <div class="left">
        Some content for the left column.
    </div>
    <div class="right">
        Some content for the right column.
    </div>
    <div class="middle">
        Some content for the middle column.
    </div>
</div>