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

Question

参见 小提琴示例

需要在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 可查看的 JSFiddle 结果）

---

它适用于以下部分：

• 申请zoom: 1;财产以使overflow: hidden;财产通过hasLayout
• 将右列移动到左列的标签中
• 右栏有两个单独的部分
  • 列背景的一个非常高的空div（给出相等列高的错觉）
  • div指定height垂直定位的内容
• 将右列元素绝对定位在相对定位的左列的右上角
• 向左列添加与右列宽度相等的右填充（以避免右列覆盖左列）
• 根据指定的内容垂直对齐正确的内容height
• 添加min-width: 100px;到左列，这样现代浏览器就不会在窗口太小时切断内容

---

注意事项：

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

Answer 2

给你，我添加position;absolute到正确的div，删除float:right并添加right:0px

http://jsfiddle.net/LQEM7/2/