Css элементы с одной и той же автоматической высотой

Question

Я хотел бы иметь дизайн, основанный на следующий HTML-коде:

<div class="container"> 
 
\t <div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div> 
 
\t <div class='title'>Title</div> 
 
\t <div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div> 
 
</div> 
 

 
<div class="container"> 
 
\t <div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div> 
 
\t <div class='title'>This is a very very long title longer than a single line, maybe two or three lines... I don't know!</div> 
 
\t <div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div> 
 
</div>

То, что я ищу, чтобы сделать это, чтобы иметь два столбца («контейнеры») и иметь элементы «title» на одинаковой высоте. Я не хочу иметь фиксированную высоту (потому что я не знаю, как долго это название), и я бы не хотел использовать Javascript.

Есть ли какой-либо css-трюк или css-селектор, похожий на «все элементы .title имеют одинаковую высоту»?

спасибо.

Answer 1

Не мог бы вы попробовать ниже стиль и дайте мне знать, если это то, что вы ищете ?:

<style> 
 
.container { 
 
     display: inline-block; 
 
     width: 200px; /* change as you see fit */ 
 
     /*height: 100px; change as you see fit */ 
 
     margin: 10px; /* change as you see fit */ 
 
} 
 
.image>img{ 
 
    width:50px !important; /* change as you see fit */ 
 
    height:50px !important; /* change as you see fit */ 
 
} 
 
div.title{ 
 
    min-height:40px !important; /* change as you see fit */ 
 
    margin:10px 0 !important; /* change as you see fit */ 
 
    background:#EEE !important; /* change as you see fit */ 
 
    padding: 10px !important; /* change as you see fit */ 
 
} 
 
</style> 
 

 

 
<div class="container"> 
 
\t <div class='image'><img src="http://lorempixel.com/500/500"/></div> 
 
\t <div class='title'>Title</div> 
 
\t <div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div> 
 
</div> 
 

 
<div class="container"> 
 
\t <div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div> 
 
\t <div class='title'>This is a very very long title longer than a single line, maybe two or three lines... I don't know!</div> 
 
\t <div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div> 
 
</div>

Надеется, что это помогает.