css - 两列布局，一列垂直居中

Question

见 fiddle example

需要在 ie6+ 下工作

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
    </div>
</div>

如何让右边的div和左边的高度一样，内容垂直居中？

Answer 1

支持IE6吧？好吧，这是一个本着 IE6 精神的非常不理想的解决方案。 :|

---

HTML:

<div class="container">
    <div class="left">
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>
        <div class="right-column"></div>
        <div class="right-content">right content fixed width</div>
    </div>
</div>

CSS:

.right-column {
    width: 180px;
    height: 10000px;
    position: absolute;
    background: #fc0;
    right: 0;
    top: 0;
}
.right-content {
    height: 20px;
    width: 180px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
    text-align: center;
}

.left {
    background: #e8f6fe;
    overflow: hidden;
    padding-right: 180px;
    position: relative;
    zoom: 1; /* hasLayout */
    min-width: 100px;
}

(IE6-viewable JSFiddle results here)

---

它在这些部分起作用:

• 应用 zoom: 1; 属性来获取 overflow: hidden; 通过 hasLayout 工作的属性
• 将右列移动到左列的标签中
• 在右栏有两个独立的部分
  • 用于列背景的非常高的空 div(给出列高相等的错觉)
  • 内容div指定高度垂直定位
• 将右列元素绝对定位在相对定位的左列的右上角
• 向左列添加等于右列宽度的右填充(以避免右列覆盖左列)
• 根据指定的高度
垂直对齐正确的内容
• 将 min-width: 100px; 添加到左栏，这样现代浏览器就不会在窗口太小时截断内容

---

注意事项:

• 您需要调整 .right-content 的 height 和 margin-top 以适应内容
• 如果右栏的高度大于左栏，则右栏的内容将被截断