0

见http://jsfiddle.net/RZzwP/

在一个 div 中，我有两个宽度为 50% 的可变高度 div，一个向左浮动，一个向右浮动。

我希望所有三个 div 的高度等于两个子 div 中最大的一个的高度。

一个小问题是我想要一些文本在中间（跨越 50% 的除法），使表格变得棘手（/不可能？）。

<div class="or cf">
    <div class="a"><h1>A!</h1></div>
    <span>OR</span>
    <div class="b or cf">
        <div class="a"><h1>B</h1></div>
        <span>OR</span>
        <div class="b"><h1>C</h1></div>
    </div>
</div>

而css是：（类cf是这个clearfix）

.or {
    width: 100%;
    position: relative;
}
.or > .a {
    width: 50%;
    height: 100%;
    z-index: 0;
    float: left;
}
.or > .b {
    width: 50%;
    height: 100%;
    z-index: 0;
    float: right;
}
.or > .or > .a {
    width: 100%;
    height: 50%;
}
.or > .or > .b {
    width: 100%;
    height: 50%;
}
.or span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.5em;
    margin-left: -20px;
    width: 40px;
    z-index: 1;
}

正如您从我的 jsFiddle 中看到的那样，带有A!和的 div 并C!没有延伸到其父级的底部。

我怎样才能做到这一点？

4

0 回答 0