等高的 div 始终并排保持在一起答案

【问题标题】：Equal height divs kept together side-by-side always等高的 div 始终并排保持在一起
【发布时间】：2015-07-23 07:04:12
【问题描述】：

使用 Bootstrap 3.x 并创建一个常见的 3 列布局。在桌面视图中，我希望所有三个 div 位于同一行且高度相同。当缩小到最小宽度时，我希望前两个 div 始终彼此相邻，但第三个放在下方。始终，前两个 div 应该是相同的高度。如果第二个 div 比第一个短，则第三个 div 在第二个的下方，在第一个的右侧。

<div class="row">
    <div class="col-sm-12 col-md-9">
        <!-- keep these two divs together side by side and the same height -->
        <div class="col-xs-6 col-sm-6 col-md-6">
            this is panel one
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6">
            this is panel two
        </div>
    </div>
    <div class="col-sm-12 col-md-3">
        <!-- this div should be beside the other two on large screens and drop below on xsmall screens -->
        side bar ad
    </div>
</div>

这是可视化问题的另一种方法。前两个需要高度相同：http://www.bootply.com/29cNrJrEwT

【问题讨论】：

感觉就像是在请人为您完成这项工作，而不是真正提出问题。
没有。它被称为在过去的 6 个小时里我一直在反复试验，但仍然无法让它工作。正如许多人所说，您会认为通过 Bootstrap 3 有人会添加等高 div 作为标准功能。
这就是创建flexbox 的原因。这并不像看起来那么难。

标签： css twitter-bootstrap

【解决方案1】：

康妮·德辛科，您好。
要让 div 像你在这里问的那样流动，你会这样做。
这是Fiddle。
您说前两个街区应该具有相同的高度，这样您就不会遇到下面流动的第三个街区的问题。
但是，如果说第二个块比第一个块短，则将前 2 个块包装在 row 中，并将第 3 个块包装在 row 中，并添加到 row 中的第 3 个块 @987654328 @ 所以在小屏幕上它会占据整个宽度。

<div class="container"> 
    <div class="row text-center">
        <div class="col-xs-6 col-sm-4 block1"><h2>Block 1</h2></div>
        <div class="col-xs-6 col-sm-4 block2"><h2>Block 2</h2></div>
        <div class="col-xs-6 col-sm-4 block3"><h2>Block 3</h2></div>
    </div>

</div>

如果您确实想缩短第二个区块。
那么你可以这样做。
这是Fiddle。

注意这是不使用 Flex ... Flex 没有完整的浏览器支持。

<div class="container"> 
    <div class="row-fluid col-xs-12 col-sm-8  text-center clear">
        <div class="col-xs-6 col-sm-6 block4"><h2>Block 1</h2></div>
        <div class="col-xs-6 col-sm-6 block5"><h2>Block 2</h2></div>
    </div>
    <div class="row-fluid col-xs-12 col-sm-4 text-center clear">
        <div class="col-xs-6 col-sm-12 block6 "><h2>Block 3</h2></div>
    </div>

</div>

【讨论】：

【解决方案2】：

为此创建了 Flexbox。从字面上看。

http://jsfiddle.net/rudiedirkx/6ka86vfx/

用display: flex定义一个弹性容器
告诉它的孩子flex: 1
- 除了较大的孩子，在这种情况下他们是flex: 3
儿童也可以是弹性容器
- 这是孩子们再次拥有flex: 1，以使他们的大小相同

您的类名不是最具描述性的，但 CSS 在其他方面非常简单：

.row { /* flex container */
    display: flex;
}
.row > div { /* all its children */
    flex: 1;
}
.row > div:first-child { /* one of its children is bigger (3:1) and is a flex container itself */
    display: flex;
    flex: 3;
}
.row > div:first-child > div { /* all its children are equal size */
    flex: 1;
}

【讨论】：