Question

我现在拥有：Image

我知道棕色div的高度将是动态的，所以我想让其他3个div（蓝色，灰色和红色）自动调整/调整为棕色div高度。什么是实现这一目标的最佳方式？

以下是我的一些代码：

<div class="row">

    {{--SCORES--}}
    <div class="col-md-3" style="background-color: #2F96B4">
    </div>

    {{--BOARD--}}
    <div class="col-md-4" style="background-color: #8a6d3b">
    </div>

    {{--PLAYERS AND SPECTATORS--}}
    <div class="col-md-2" style="background-color: #666666">
    </div>

    {{--CHAT--}}
    <div class="col-md-3">
    </div>
</div>

注意：是的，我使用bootstrap来限制div的宽度。

谢谢。

Answer 1

您可能希望将其定义为表格：

.row { display: table; }
.my_divs { display: table-cell; }

您必须将.my_divs类添加到所有四个div

Answer 2

解决了这种风格：

.Row {
    display: table;
}

.Row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

参考：How can I make Bootstrap columns all the same height?

一个div和兄弟的动态高度divs autoheight

2 个答案: