等高的div总是并排放在一起

Question

使用Bootstrap 3.x并创建一个通用的3列布局。在桌面视图中，我希望所有三个div在同一行和相同的高度。当缩小到最小宽度时，我希望前两个div始终保持彼此相邻但下面的第三个下降。总是，前两个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

Answer 1

Connie DeCinko ，你好。
为了让div像你在这里问的那样流动，你会这样做。
这是 Fiddle 你说前两个块应该有相同的高度所以你不会遇到下面流过的第三个块的问题。
但是，如果说第二个块比第一个块短，则将前2个块包装在<input id='whoCares' name='whoCares' value='Some Value' onchange='getInputVal(this)' /> 中，并将第3个块包装在row中并添加到row对于第3块row所以当在小屏幕上占用整个宽度时。

col-xs-12

如果您确实希望缩短第二个区块 那么你可以这样做。
这是 {{3}} 。

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

<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> 

Answer 2

为此创建了Flexbox。字面上。

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

• 使用display: flex
定义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;
}