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

时间：2014-10-14 15:55:32

标签： html css responsive-design 

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

显示：

enter image description here

如何修改我的CSS以确保三个框（带有框阴影的框）高度与文本最多的框相匹配（中间框应该是相同的高度，但由于内容较短）

框内的任何内容（小于文字最多的框）都会有空格，这很好。

这就是我希望的：

enter image description here

4 个答案:

答案 0 :(得分：3)

有几种方法和方法，但这里有一个快速的方法和方法：

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

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

答案 1 :(得分：2)

Flexbox或jQuery的可能性吗？正如其他人所提到的那样，唯一纯粹的CSS方式（目前）是通过表格单元格，而我并不是它的忠实粉丝。

如果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);

或者如果可以使用Flexbox（现代浏览器），现在这很容易：

CSS：

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

答案 2 :(得分：1)

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

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

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

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

UPD ：对于响应式布局，您可以在table-cell和table-row之间切换，使它们水平排列（表格单元格）和垂直排列（表格行格式）： http://jsfiddle.net/8rvdkyke/1/

答案 3 :(得分：1)

这是我这样做的（截至此日期）

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://stackoverflow.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');
});
相关问题
最新问题