Question

我想基于以下HTML代码进行设计：

<div class="container">
	<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
	<div class='title'>Title</div>
	<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">
	<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
	<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>
	<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）并使“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">
	<div class='image'><img src="http://lorempixel.com/500/500"/></div>
	<div class='title'>Title</div>
	<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">
	<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
	<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>
	<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>

希望它有所帮助。

具有相同自动高度的Css元素

1 个答案: