Question

我连续有三个兄弟div：

右div：高度由文本内容决定的div。

中心div：一个div应与Right div的高度相匹配。

左div：我想要设置为右div的50％高度的div。

CSS尝试使用左侧div不工作的flexbox：

.container {
    display: flex;
}
.left {
    width: 50px;
    height: 50%;
    background-color: lightcyan;
}
.center {
    width: 50px;
    background-color: lightcoral;
}
.right {
    width: 300px;
    background-color: palegreen;
}

我发现允许Left div计算Right div高度的百分比的唯一方法是使用position: absolute，就像this answer一样。

绝对定位不太理想，因为它阻止我使用正常的布局流程来连续设置三个div彼此相邻。

有什么方法可以将Left div设置为Right div高度的百分比，而不需要使用固定的水平布局来连续设置三个div？

布局只需要在最近的Chrome中使用，因此浏览器不兼容性不是问题。我对使用flexbox或表格布局的解决方案持开放态度。

Answer 1

我不知道您对HTML结构有什么限制。但是，一个简单的方法就是将left div设置为等高table-cell div，并在其中设置一个高度为50%的内部div。它不会影响元素流程：

Updated JsFiddle

＆＃13;

.container {
    display: table;
}

.left {
    display: table-cell;
    position: relative;
    width: 50px;
}

.left > div {
    background-color: lightcyan;
    height: 50%;
    width: 100%;
    position: absolute;
}

.center {
    display: table-cell;
    width: 50px;
    background-color: lightcoral;
}
.right {
    display: table-cell;
    width: 300px;
    background-color: palegreen;
}

＆＃13;

<div class="container">
    <div class="left">
        <div></div>
    </div>
    <div class="center"></div>
    <div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor vitae ante quis suscipit.
    </div>
</div>

＆＃13;

将div的高度设置为兄弟div的百分比

1 个答案: