CSS 如何将 div 中的 div 与同级 div 垂直对齐(内联 block )

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 设置，包括弄乱行高、显示(内联 block 与 block )、高度/宽度百分比、 float ...

Answer 1

目前尚不清楚您想要的信息中 C 的高度应该是多少(您没有解决这个问题)。

如果 C 是任意高度

可以这样做 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+；注意:与 Firefox 和 IE 相比，Chrome 在计算 D 元素的绝对位置方面略有不同)。此解决方案删除了​​ D 的 width 和 height 上的 100% 内联样式。

.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;
}