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

Question

在嘗試制作網格樣式的網站時，我對一個重復出現的問題感到困擾，如何根據該行中最高的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屬性來滿足您的要求。

這是示例 。 如果您需要其他方式，您可以發表評論。

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

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

Answer 4

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

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