CSS：元素的高度基于它旁边的图像高度？

Question

我的页面上有一个列表视图，工作正常。

但我需要弄清楚如何改变高度文本持有者（黑色区域）的大小，使其高度与旁边的图像完全相同。

这是我到目前为止所做的：

.vid-items{
  display:inline-block;
  width:100%;
  height:auto;
  text-align:center;
  border:solid 1px #ccc;
  position:relative;
  margin-bottom:5px;
  padding:10px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.vid-items img {
  width:45%;
  display:inline-block;
  vertical-align:top;
}

.vid-itemsTitle {
  width:50%;
  background-color:#000;
  padding:5px;
  color:#fff;
  font-size:14px;
  display:inline-block;
  height:100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;    	
}

<div class="vid-items">
  <img class="itemsImg" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8.jpg" >
  <div class="vid-itemsTitle">some texts can go here as a title... this can be anything... 1,2,34...
  </div>
</div>

我知道这可以使用jquery实现，但我宁愿用CSS做这个吗？

有人可以就此提出建议吗？

Answer 1

您可以通过display: flex link

进行制作

＆＃13;

＆＃13;

.vid-items{
   text-align:center;
   border:solid 1px #ccc;
   position:relative;
   margin-bottom:5px;
   padding:10px;
   		box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   
   display: flex;
	
}

.vid-items img{

	width:45%;
	display:inline-block;
	vertical-align:top;
	

}

.vid-itemsTitle{
	width:50%;
	background-color:#000;
	padding:5px;
	color:#fff;
	font-size:14px;
}

＆＃13;

<div class="vid-items">
<img class="itemsImg" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8.jpg" >
<div class="vid-itemsTitle">some texts can go here as a title... this can be anything... 1,2,34...</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以使用display flex。

＆＃13;

＆＃13;

.vid-items{
	display:flex;
	width:100%;
  text-align:center;
  border:solid 1px #ccc;
  margin-bottom:5px;
  padding:10px;
  box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
	
}

.vid-items img{
	width:45%;
}

.vid-itemsTitle{
	width:50%;
	background-color:#000;
	padding:5px;
	color:#fff;
	font-size:14px;
   		box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   
	
}

＆＃13;

<div class="vid-items">
<img class="itemsImg" src="http://via.placeholder.com/350x150" >
<div class="vid-itemsTitle">some texts can go here as a title... this can be anything... 1,2,34...</div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者您可以使用display: table

＆＃13;

＆＃13;

.vid-items{
	display:table;
	width:100%;
  text-align:center;
  border:solid 1px #ccc;
  margin-bottom:5px;
  padding:10px;
  box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
	
}

.vid-items img{
	width:100%;
  display: table-cell;
}

.vid-itemsTitle{
 display: table-cell;
     vertical-align: top;
	width:50%;
	background-color:#000;
	padding:5px;
	color:#fff;
	font-size:14px;
   		box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   
	
}

＆＃13;

<div class="vid-items">
<img class="itemsImg" src="http://via.placeholder.com/350x150" >
<div class="vid-itemsTitle">some texts can go here as a title... this can be anything... 1,2,34...</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

通常情况下，flexbox是你的朋友。

.vid-items{
  display:flex;
  width:100%;
  text-align:center;
  border:solid 1px #ccc;
  position:relative;
  margin-bottom:5px;
  padding:10px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border:1px solid red;
  align-items:flex-start;
}

.vid-items img{
  max-width:45%;
  display:inline-block;
  vertical-align:top;
  flex-grow:0;
}

.vid-itemsTitle{
  width:50%;
  background-color:#000;
  padding:5px;
  color:#fff;
  font-size:14px;
  display:inline-block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  align-self:stretch;
}

<div class="vid-items">
<img class="itemsImg" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8.jpg" >
<div class="vid-itemsTitle">some texts can go here as a title... this can be anything... 1,2,34...</div>
</div>