1

我在让我的 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，但希望到那时所有这些布局的东西都会被简化 =)

4

2 回答 2

1

If you are using CSS3 than why you are not using flexBox layout. That will resolve your issue easily.

Check for details on Mozilla : Using CSS flexible boxes

For IE you can go for : Grid layout

于 2013-03-22T06:43:45.307 回答
1

你可以用一行js来实现。

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

http://jsfiddle.net/TAZhg/

于 2013-03-22T06:58:48.660 回答