两列布局，一列垂直中间

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与指定height进行垂直定位
• 将右列元素绝对定位在相对定位的左列的右上角
• 向左列添加与右列宽度相等的右填充（以避免右列覆盖左列）
• 根据指定的height垂直对齐正确的内容
• 将min-width: 100px; 添加到左列，这样现代浏览器就不会在窗口太小时截断内容

---

注意事项：

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

Answer 2

给你，我在右边的 div 中添加了position;absolute，删除了float:right 并添加了right:0px

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