javascript - 如何根据呼吸内容使我所有的 div 的高度相同

Question

在尝试制作网格样式的网站时，我被一个反复出现的问题所困扰，如何根据该行中最高的 div 使一行中的所有 div 具有相同的高度。其中一个 div 将包含一组 div，这些 div 需要根据该高度拉伸(stretch)并自动填充，以便所有内容一起移动。

将 div 设置为相同的高度必须基于 div 本身的内容。例如，当文本框调整大小时，图片也应保持相同的高度，然后所有“图标”也应拉伸(stretch)并保持相同的高度。

这是我目前拥有的:

<div class="container">

  <div class="half">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ipsum tortor. Etiam ut lacus auctor, venenatis mauris vitae, scelerisque dolor. Mauris pulvinar purus libero, eget congue sem lobortis vitae.</p>
  </div>

  <div class="quater">
    <img src="http://i68.tinypic.com/6yo87o.jpg"></img>
  </div>

  <div class="quater social">
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
  </div>

</div>

CSS:

.half {
  width: 50%;
  background: yellow;
  float: left;
}

.quater {
  width: 25%;
  background: red;
  float: left;
}

.third {
  width: 33.33333333%;
  background: blue;
  float: left;
  color: white;
}

img {width: 100%;}

https://jsfiddle.net/atp1agmk/4/

这是我想要的结果:

我不介意是否必须通过 JavaScript 完成

Answer 1

.container{
 display: flex;
}
.half {
  width: 50%;
  background: yellow;
  float: left;
}

.quater {
  width: 25%;
  background: red;
  float: left;
display: flex;
    align-items: center;
}

.third {
  width: 33.33333333%;
  background: blue;
  float: left;
  color: white;
  display: flex;
align-items: center;
justify-content: center;
}
.social {
flex-wrap: wrap;
align-items: stretch;
}
img {width: 100%;height:auto;}

<div class="container">

  <div class="half">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ipsum tortor. Etiam ut lacus auctor, venenatis mauris vitae, scelerisque dolor. Mauris pulvinar purus libero, eget congue sem lobortis vitae.</p>
  </div>

  <div class="quater">
<img src="http://i68.tinypic.com/6yo87o.jpg" />
  </div>

  <div class="quater social">
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
  </div>

</div>

https://jsfiddle.net/atp1agmk/20/