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

<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%;
}

displays this:

How can I modify my CSS to ensure the three boxes (the one with the box shadow) height matches that of the box with the most text (The middle box should be the same height, but because of content it is shorter).

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

Any content within a box, which is less than the box with the most text, will have blank space, which is fine.

框内的任何内容(小于文本最多的框)都将有空格,这很好。

This is what I would like it to be:

这就是我希望它:

4 个解决方案

#1

There are several ways and methods, but here's a quick one:

有几种方法和方法,但这里有一个快速的方法和方法:

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

Demo http://jsfiddle.net/Lg9y9s93/1

#2

Are Flexbox or jQuery possibilities? As others have mentioned the only pure CSS way (at the moment) is via table-cell which I'm not a huge fan of.

是Flexbox还是jQuery的可能性?正如其他人所提到的那样,唯一纯粹的CSS方式(目前)是通过表格单元格,我并不是它的忠实粉丝。

If jQuery is possible there's a fairly simple script I use to make heights match:

如果jQuery是可能的,那么我使用一个相当简单的脚本来使高度匹配:

CSS:

.item{
  float: left;
  width: 280px;
}

jQuery:

// Set 'x' number of items to the tallest height
var tallestBox = 0;

$(".item").each(function() {
  var divHeight = $(this).height();

  if (divHeight > tallestBox){
    tallestBox = divHeight;
  }
});

// Apply height & add total vertical padding
$(".item").css("height", tallestBox + 30);

Or if Flexbox is possible (modern browsers) this is crazy easy now:

或者如果Flexbox是可能的(现代浏览器),现在这很容易:

CSS:

.contain{
  display: flex;
  flex-direction: row;
}

#3

You can use pseudo table layout: http://jsfiddle.net/8rvdkyke/

您可以使用伪表格布局:http://jsfiddle.net/8rvdkyke/

.content {
    display: table;
    width: 400px;
}

.content > div {
    display: table-cell;
    height: 100%;
    vertical-align: top;
}

This listing of code is emulating behavior of table layout causing all children div's to be the same height. You can tweak the sizes and other styles for your needs.

此代码列表模拟表格布局的行为,导致所有子节点的高度相同。您可以根据需要调整尺寸和其他样式。

UPD: For responsive layout out, you can switch between table-cell and table-row to make them arranged horizontally (table-cell) and vertically (table-row): http://jsfiddle.net/8rvdkyke/1/

UPD:对于响应式布局输出,您可以在table-cell和table-row之间切换以使它们水平排列(table-cell)和垂直排列(table-row):http://jsfiddle.net/8rvdkyke/1/

#4

This is how I do this (as of this date)

这就是我这样做的(截止日期)

http://jsfiddle.net/sheriffderek/ae2sawnn/

HTML

<section class="your-section">

    <ul class="block-list">
        <li class="block">
            <a href="#">
                <div class="image-w">
                    <img src="http://placehold.it/1600x900" alt="your-image" />
                </div>
                <div class="text-w">
                    <p><strong>Might as well have the whole thing a link</strong> and not just that little bitty part of a sentence... etc... etc...</p>
                </div>
            </a>
        </li>

        <li class="block">
            {{ ... }}
        </li>

        <li class="block">
            {{ ... }}
        </li>

    </ul>

</section> <!-- .your-section -->

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

.your-section {
    width: 100%;
    float: left;
}

.block-list {
    width: 100%;
    float: left;
    list-style: none;
    margin: 0; padding: 0;
}

.block {
    width: 100%;
    float: left;
    padding: .5rem;
    margin-bottom: 1rem;

    border: 1px solid red;
}

.block a {
    display: block;
}

.image-w {
    width: 100%;
    float: left;
}

.image-w img {
    display: block;
    width: 100%;
    height: auto;
}

.text-w {
    width: 100%;
    float: left;
}


@media (min-width: 600px) {

    .block {
        width: 33%;
        margin-bottom: 0;
    }

} /* end break-point 1 */

JS

// resources
// http://*.com/questions/14167277/equal-height-rows-for-fluid-width-elements

// @popnoodles 's answer on S.O. 

$.fn.extend({

    equalHeights: function(){

        var top = 0;
        var row = [];
        var classname = ('equalHeights'+Math.random()).replace('.','');

        $(this).each(function(){

            var thisTop = $(this).offset().top;

            if ( thisTop > top ) {

                $('.'+classname).removeClass(classname); 
                top = thisTop;

            }

            $(this).addClass(classname);

            $(this).outerHeight('auto');

            var h = (Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));

            $('.'+classname).outerHeight(h);

        }).removeClass(classname);
    }      
});

$(function(){ // call the function
  $(window).resize(function() {
    // on resize... but also... trigger that once by default right off the bat
    $('.block').equalHeights();
  }).trigger('resize');
});