Question

我正在尝试在右侧制作一个面板，使左侧两个面板的高度相等。

像这样：http://i.imgur.com/S0uMCut.png

我尝试过使用.row-eq-height css，但它不能自行拉伸面板。

<!--  Row #2 -->
    <div class="row">
        <div class="container row-eq-height">
            <div class="col-md-4">
                <!--  Information panel -->
                <div class="panel panel-default -->">

                    <div class="panel-heading">
                        <p class="panel-title">Information</p>
                    </div>

                    <div class="panel-body">
                        <h4 id="numVal">Value: 0</h4>
                    </div>

                </div>

                <!--  Secondary box -->
                <div class="panel panel-default secondPanel">
                    <div class="panel-heading">
                        <p class="panel-title">Box2</p>
                    </div>

                    <div class="panel-body">
                    </div>
                </div>
            </div>

            <!--  Main panel -->
            <div class="col-md-8">
                <div class="panel panel-default mainPanel">
                    <div class="panel-body">

                    </div>
                </div>
            </div>

        </div>
    </div>

我还是新手，所以请耐心等待！我会感激一些帮助！谢谢！

编辑：CSS：https://pastebin.com/7RXYYH3w抱歉，我之前没有包含它！

Answer 1

我调整了一下并添加了显示：flex到外部容器。这似乎就是你所追求的。

<div class="row">
    <div class="row container-fluid" style="display:flex">
        <div class="col-md-4">
            <!--  Information panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <p class="panel-title">Information</p>
                </div>
                <div class="panel-body">
                    <h4 id="numVal">Value: 0</h4>
                </div>
            </div>
            <!--  Secondary box -->
            <div class="panel panel-default secondPanel">
                <div class="panel-heading">
                    <p class="panel-title">Box2</p>
                </div>
                <div class="panel-body">
                </div>
            </div>
        </div>
        <!--  Main panel -->
        <div class="panel panel-default mainPanel col-md-8">
            <div class="panel-body">

            </div>
        </div>
    </div>
</div>

Answer 2

您可以使用Flexbox属性匹配高度。以下是我认为你要做的事情：http://jsfiddle.net/DTcHh/33186/

.row-eq-height{
  display: flex;
}
.take-up-space{
  flex:1;
}

.flex-column{
  display: flex;
  flex-direction: column;
}

此外，这是开始使用Flexbox的一种好方法：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

等高的面板？

2 个答案: