的 (IE6-viewable JSFiddle results here)

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-viewable JSFiddle results here)

它适用于以下部分：

应用zoom: 1;属性以通过overflow: hidden;
获取hasLayout属性
将右栏移至左栏的标签

右栏有两个独立的部分

列背景真空高div（给出相等列高的错觉）

具有指定div的内容height，用于垂直定位

将右列元素绝对放置在相对定位的左列
的右上角
向左侧列添加右侧填充等于右侧列的宽度（以避免右侧列覆盖左侧列）

根据指定的height
垂直对齐正确的内容
将min-width: 100px;添加到左栏，以便当窗口太小时，现代浏览器不会切断内容

注意事项：

您需要调整height的{{1}}和margin-top以符合内容

如果右栏的内容高于左栏
，则其内容将被切断

Answer 2

在这里，我向正确的div添加了position;absolute，删除了float:right并添加了right:0px

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

两列布局，一列垂直中间

2 个答案:

的 (IE6-viewable JSFiddle results here)