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

Question

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

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

以下是我目前的情况：

<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

您可以使用flex css属性来满足您的要求。

Here is the Example。如果您需要其他方式，您可以发表评论。

Answer 2

你可以像这样使用flex来做到这一点

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

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

.third {
   width: calc(100% / 3);
   height: calc(100% / 2);
   background: blue;
   float: left;
   color: white;
}

img {width: 100%; height: 100%;}

.container {
    display: flex;
}

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 4

Check which div height is greater and apply that to all divs.
Try this out

https://jsfiddle.net/nikhila/jv2jfuwL/