1

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 设置，包括弄乱行高、显示（内联块与块）、高度/宽度为 %、浮动......

4

1 回答 1

3

目前尚不清楚 C 的高度应该在您想要什么的信息中（您没有解决这个问题）。

如果 C 是任意的height

可以在配置此小提琴时完成（在 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 的灵活高度

可以在配置此小提琴时完成（在 IE8+ 中工作；注意：与 Firefox 和 IE 相比，Chrome 在计算absoluteD 元素位置的方式上显示出细微的差异）。此解决方案删除100%了​​ Dwidth和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;
}
于 2012-08-04T12:53:06.393 回答