CSS如何垂直对齐div中的div与兄弟div（内联块）

Question

http://jsfiddle.net/LdTpg/3/

<div class="a">
    <div class="b">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo nunc, vehicula nec auctor a, lacinia dapibus tortor. Praesent id mi id dui sodales laoreet. Maecenas ut aliquet urna. Donec porttitor turpis eu velit viverra in tincidunt nisi viverra. Curabitur mi ligula, facilisis ut cursus vel, fermentum sit amet nibh. Ut in nisl cursus quam molestie scelerisque non a nulla. Morbi eu diam nibh, eu dictum orci. Nunc est neque, dignissim ut fermentum id, sagittis eget urna.
    </div>
    <div class="c">
        <div class="d" style="background: grey; height: 100%; width: 100%;"></div>
        <div class="e">Vertical Align This</div>
    </div>
</div>

样式：

​.a {
    border:1px solid red;
    overflow:hidden;
}
.a div {
    display:inline-block;
}
.b {
    width:200px;
    border:1px solid blue;
    float:left;
    position:absolute;
}
.c {
    width: 100%; 
    margin-left: 200px;        
    position:relative;
}
.d {
    position:absolute;
    top:0;
    left:0;
}
.e {
    position: relative;
}

所以基本上

• 我知道左边div（容器B）的宽度，但不知道它的高度
• 右侧div（容器C）的宽度必须占用剩余空间
• 我不知道外部div（容器A）的高度或宽度
• 右侧div（容器C）内部有一个元素（容器D），必须放在另一个元素（容器E）下面
• 容器D应与容器C的尺寸相同
• 容器E的文本应该是水平和垂直中心（相对于容器C）

我尝试了各种CSS设置，包括弄乱行高，显示（内联块与块），高度/宽度为％，浮动......

Answer 1

目前还不清楚C的高度应该在您所希望的信息中（您没有解决这个问题）。

如果C是任意height

可以在配置this fiddle时完成（在IE7 +中工作）。

.a {
    border:1px solid red;
    overflow:hidden;
}
.a div {
    display:inline-block;
}
.b {
    width:200px;
    border:1px solid blue;
    float:left;
}
.c {
    overflow: hidden;       
    position:relative;
    height: 100px; /* arbitrary height */
    line-height: 100px; /* match arbitrary height */
    text-align: center;
}

.a .c {display: block;}

.d {
    position:absolute;
    top:0;
    left:0;
}
.e {
    position: relative;
    vertical-align: middle;
}

如果C应该与B的弹性高度相匹配

可以在配置this fiddle时完成（在IE8 +中运行; 注意：Chrome与IE和IE在计算absolute位置方面的显示略有差异D元素）。此解决方案会删除D 100%和width上的height内联样式。

.a {
    border:1px solid red;
    overflow:hidden;
    display: table;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
    position: relative;
}
.a div {
    display: table-cell;
}
.b {
    width:200px;
    border:1px solid blue;
}
.c {     
    text-align: center;
    vertical-align: middle;
}

.d {
    position:absolute;
    top:1px;
    right: 1px;
    bottom: 1px;
    left: 203px;
}

.a .e {
    display: inline-block;
}
.e {
    position: relative;
}