如何用CSS使文本容器高度与相邻图片高度一致？

我来帮你搞定这个问题！完全不需要依赖jQuery，用现代CSS布局就能轻松实现文本容器和图片高度一致的效果。咱们先拆解下现有代码的问题：你用了inline-block布局，虽然给文本容器加了height:100%，但因为父元素.vid-items的高度是auto（由内容撑开），这个100%没有正确的高度参照，所以没法和图片高度对齐。

下面是最简洁可靠的解决方案，用Flexbox布局来实现：

修改后的CSS代码 #

.vid-items{
  display: flex; /* 切换为flex布局，子元素自动等高 */
  width:100%;
  border:solid 1px #ccc;
  margin-bottom:5px;
  padding:10px;
  box-sizing: border-box;
}

.vid-items img {
  flex: 0 0 45%; /* 固定宽度45%，不被压缩或拉伸 */
  object-fit: cover; /* 可选：保证图片比例不变，避免拉伸变形 */
  margin-right: 5%; /* 给图片和文本容器之间添加间距 */
}

.vid-itemsTitle {
  flex: 1; /* 自动占据剩余所有空间，适配宽度 */
  background-color:#000;
  padding:5px;
  color:#fff;
  font-size:14px;
  box-sizing: border-box;
  /* 无需设置height:100%，flex子元素默认会拉伸到和兄弟元素等高 */
}

对应的HTML代码（无需修改） #

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

方案原理说明 #

• Flexbox布局下，父元素设置display:flex后，所有子元素默认会沿主轴排列，并且自动拉伸高度以匹配最高的子元素，完美解决了等高对齐的核心需求。
• flex:0 0 45%确保图片宽度固定为45%，不会随容器宽度变化而伸缩；flex:1让文本容器自动填充剩余空间，你也可以换成flex:0 0 50%来固定文本容器宽度，根据需求调整即可。
• 可选的object-fit:cover可以避免图片因容器比例问题变形，保持原有比例裁剪显示。

如果需要兼容非常老旧的浏览器（比如IE9及以下），可以考虑用表格布局（display:table + display:table-cell），但Flexbox已经支持所有现代浏览器，是更推荐的主流方案。

内容的提问来源于stack exchange，提问作者Rooz Far