html - 无论内容如何，​​如何确保三个DIV的高度相同

Question

<div class="section group">
<div class="col span_1_of_3 articleTeaserBoxColor">
    <div class="test2n">
        <div class="imgHolder"><img id="NewsArticle_2790_image" class="imgArtThumb" title="" alt="" src="artOne.png" /></div>
        <div class="textHolder">
            <div class="textHolderTop"><a href="/template.aspx?id=2790" class="" title="">Care on the Fast Track</a></div>
            <div class="textHolderBottom">The National Cancer Institute</div>
        </div>
    </div>
</div>
<div class="col span_1_of_3 articleTeaserBoxColor">
    <div class="test2n">
        <div class="imgHolder"><img id="NewsArticle_2792_image" class="imgArtThumb" title=" alt="" src="artThree.png" /></div>
        <div class="textHolder">
            <div class="textHolderTop"><a href="/template.aspx?id=2792" class="" title="">Stay Connected</a></div>
            <div class="textHolderBottom">tool for interacting with your provider and following your healthcare</div>
        </div>
    </div>
</div>
<div class="col span_1_of_3 articleTeaserBoxColor">
    <div class="test2n">
        <div class="imgHolder"><img id="NewsArticle_2791_image" class="imgArtThumb" title="" alt="" src="artTwo.png" /></div>
        <div class="textHolder">
            <div class="textHolderTop"><a href="/template.aspx?id=2791" class="" title="">Know When Antibiotics Work and When They Don't</a></div>
            <div class="textHolderBottom">If you or your child has a virus, antibiotics will not help you or him/her</div>
        </div>
    </div>
</div>
</div>

CSS:

.imgArtThumb
{
    max-width: 100%;
    height: auto;
}
.imgHolder
{
    float: left;
    display: inline-block;
    width: 43%;
    padding-right: 2%;
    height: 100%;
}
.textHolder
{
    float: left;
    display: inline-block;
    width: 55%;
    height: 100%;
}
.textHolderTop
{
    width: 100%;
    height: 48%;
    text-align: left;
    padding-bottom: 2%;
    overflow: hidden;
}
.textHolderBottom
{
    width: 100%;
    height: 48%;
    overflow: hidden;
    text-align: left;
    padding-bottom: 2%;
}
.test2n
{
    text-align: left;
    height: 95%;
    width: 95%;
    padding: 2%;
    overflow: hidden;
}
.articleTeaserBoxColor
{
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}
/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}
.span_1_of_3 {
    width: 32.2%;
}
/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    overflow: auto;
    text-align: center;
    width: 100%;
}

显示这个:

如何修改我的 CSS 以确保三个框(带有框阴影的那个)的高度与文本最多的框的高度匹配(中间的框应该具有相同的高度，但由于内容的原因它更短) .

框内的任何内容，只要少于文本最多的框，就会有空格，这很好。

这是我希望的样子:

Answer 1

有多种方式和方法，但这里有一个快速的方法:

.col {
    display: table-cell;
    vertical-align: top:
}

演示 http://jsfiddle.net/Lg9y9s93/1