Question

让我的div垂直伸展时遇到一些麻烦。我已经阅读了许多SO问题和答案，但我找不到似乎对我有用的解决方案。

目前我正在使用两个div，它们应该是相等的宽度拉伸以使用总可用宽度。每个div的高度应该适合内容，或者拉伸到父高度，以较大者为准。我发现当我开始将内容放入这些块时，如果一个内容比另一个更多，那么块高度不会长时间对齐。

我尝试过使用clearfix和height = 100％，但我似乎无法让这个工作。

Currently:
+---------+  +---------+     +---------+  +---------+
|  Text   |  | Text B  | OR  | Text A  |  |   Text  |
|    A    |  +---------+     +---------+  |    B    |
+---------+                               +---------+

Instead of: 
+---------+  +---------+     +---------+  +---------+
|  Text   |  | Text B  | OR  | Text A  |  |   Text  |
|    A    |  |         |     |         |  |    B    |
+---------+  +---------+     +---------+  +---------+

这是我的html布局：

<div class="grid-row">
    <div class="panel-quarter">
        <div class="panel-content bgnd-blue">
            <h2>First Block</h2>
            <p>What if there is just a short amount of text here.</p>
        </div>
    </div>
    <div class="panel-quarter">
        <div class="panel-content bgnd-green">
            <h2>Second Block</h2>
            <p>And what if there is a really long section of text here that could go on for quite a few lines, especially more than the previous blocks text. This would make the heights somewhat mis-aligned it would seem.</p>
        </div>
    </div>
</div>

这是我的风格：

.grid-row {
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 1em;
}

.panel-quarter {
    float: left;
    width: 50%;
}

.panel-quarter:first-of-type {
    padding-right: 1em;
}

.panel-content {
    padding: 1em;
}

.grid-row:after {
  content: "";
  display: table;
  clear: both;
}

.panel-quarter, 
.panel-quarter:after, 
.panel-quarter:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这是一个JSFiddle：http://jsfiddle.net/zg4NB/

如果你们中的一位css大师能告诉我需要调整（希望）或完全重新设计（希望不是）的地方，我将不胜感激。我确定有一天我会把我的头完全放在CSS周围，但希望所有这些布局的东西都会被简化=）

Answer 1

如果您使用CSS3而不是使用flexBox布局的原因。这将很容易解决您的问题。

检查有关Mozilla的详细信息：Using CSS flexible boxes

对于IE，您可以选择：Grid layout

Answer 2

你可以通过一行js实现这一点..

$('.panel-content').css('height', $('.grid-row').outerHeight());

http://jsfiddle.net/TAZhg/

如何将DIV高度拉伸到父DIV？

2 个答案: