Как сделать все мои одинаковые высоты div на основе содержимого дыхания

Question

Меня беспокоит проблема повторения ошибок при попытке создания веб-сайтов в стиле сетки, как мне сделать все div на одной и той же высоте в зависимости от самого высокого div в эта строка. Один из divs будет содержать набор divs, которые нужно будет растягиваться на основе этой высоты и автозаполнения, чтобы все перемещалось вместе.

Установка разделов на одну и ту же высоту должна основываться на том, какой контент находится внутри самого 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

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

Вы можете использовать свойство flex css для достижения ваших требований.

Here is the Example. Вы можете прокомментировать, если вам нужен другой способ.

Answer 3

вы можете сделать это с прогибается, как этот

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

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

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