Question

HTML

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <article id="1">
            <div class="article-header">
                <h2>This is a Header!</h2>
            </div>

            <div class="article-text">
                <p>This is a Text!</p>
            </div>
        </article>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <article id="2">
            <div class="article-header">
                <h2>This is a much longer Header which will wrap over two lines!</h2>
            </div>

            <div class="article-text">
                <p>This is a much longer Text which will wrap over also two lines!</p>
            </div>
        </article>
    </div>
</div>

CSS

.article-header,
.article-text{
    width: 100%;
}

为了这个例子我填写了内容，但实际上内容是用PHP生成的，意味着它们被创建了很多行，里面有cols。

我现在的问题是我希望ROW中的所有容器都能够在高度上相互适应。这是我的意思的示例图像：

Answer 1

使用each我们可以动态修复div's的高度。

＆＃13;

var largest = 0; //start with 0

$("article > div").each(function(){ //loop through each section
   var findHeight = $(this).height(); //find the height
   if(findHeight > largest){ //see if this height is greater than "largest" height
      largest = findHeight; //if it is greater, set largest height to this one 
   }  
});

$("article > div").css({"height":largest+"px"});

＆＃13;

.article-header,
.article-text{
    width: 50%; float:left
}
article > div h2{margin:0px}
article > div {border:1px solid #000}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
        <article id="1">
            <div class="article-header">
                <h2>This is a Header!</h2>
            </div>

            <div class="article-text">
                <p>This is a Text!</p>
            </div>
        </article>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
        <article id="2">
            <div class="article-header">
                <h2>This is a much longer Header which will wrap over two lines!</h2>
            </div>

            <div class="article-text">
                <p>This is a much longer Text which will wrap over also two lines!</p>
            </div>
        </article>
    </div>
</div>

＆＃13;

Answer 2

尝试使用display:inline-table和display:table-cell 看到这个样本小提琴： https://jsfiddle.net/p6jg104L/

动态适应DIV高度到另一个DIV的内容？

2 个答案: