如何实现图文并排等高布局且每行下方添加水平分隔线

核心修改思路 #

• 替换原有float布局为Flex布局，天然支持左右并排对齐，避免float带来的高度塌陷问题
• 给.container2设置固定高度，强制所有行高度统一
• 给标题、正文分别添加多行溢出省略规则，超出行数自动显示省略号
• 修复原有CSS中height:200缺单位的语法错误

完整修改后代码 #

CSS部分

.iconDetails {
  margin-left:4px;
  margin-right:8px;
  height:70px;
  width:100px; 
  flex-shrink: 0; /* 防止图片被压缩 */
} 

.container2 {
  width:100%;
  height:80px; /* 固定行高，可根据需求调整，保证所有行高度一致 */
  padding:1%;
  box-sizing: border-box;
  display: flex;
  align-items: center; /* 可替换为flex-start实现顶部对齐 */
}
/* 右侧文本容器 */
.text-wrapper {
  flex: 1;
  overflow: hidden;
}
.text-wrapper h4{
  font-size: 15px; 
  font-weight: 600;  
  margin:0 0 4px 0;
  /* 标题最多显示1行，超出省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-wrapper p{
  font-size: 13px; 
  font-weight: 300;  
  margin:0;
  /* 正文最多显示2行，超出省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
hr {
  margin: 8px 0;
}

HTML部分

<div class='container2'>
  <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
  <div class="text-wrapper">
    <h4>Title 1</h4>
    <p>Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text</p>
  </div>
</div>
<hr>
<div class='container2'>
  <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
  <div class="text-wrapper">
    <h4>Title 2</h4>
    <p>Body 2.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text</p>
  </div>
</div>
<hr>
<div class='container2'>
  <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
  <div class="text-wrapper">
    <h4>Title 3</h4>
    <p>Body 3.. Text... Text ... Text ... Text...</p>
  </div>
</div>
<hr>
<div class='container2'>
  <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>
  <div class="text-wrapper">
    <h4>Title 4 .... Text Text Text Text........ Text .... Text .... Text ... Text...</h4>
    <p>Body 4.. Text... Text ... Text ... Text...</p>
  </div>
</div>

效果说明 #

所有行高度固定为.container2设置的高度值，不管右侧文本是1行还是多行会自动适配，超出限制行数的文本会自动显示省略号，不会撑高容器。如果需要调整行高，直接修改.container2的height属性即可。

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