不使用display:flex实现图片与文本对齐：解决双图片横向错位问题

嘿，我来帮你搞定这个布局问题！你现在的核心问题是——那些标题和副标题的<div>是块级元素，它们会占满整行宽度，直接把第二张图片挤到下一行去了。咱不用Flex也能轻松解决，只需要给每个图片+标题的组合套个独立容器就行，具体来看：

问题分析 #

原代码里，<img>后面跟着的<div class="title">和<div class="subtitle">都是块级元素，它们会自动换行占据整行空间，导致第二张图片根本没法和第一张在同一行排列。

解决方案 #

把每个图片+标题+副标题的组合单独包裹在一个容器里，给这个容器设置display: inline-block，这样每个组合就会像行内元素一样横向排列，同时还能容纳内部的块级元素（标题、副标题）。

修改后的CSS代码 #

.row{
  padding-top: 15px;
  text-align: center; /* 让内部的inline-block元素整体居中 */
}
.img-container {
  display: inline-block; /* 关键：让每个图片组合横向排列 */
  margin: 0 10px; /* 控制两个组合之间的间距，比直接给img加margin更合理 */
}
.imgP{
  background-color: red;
  /* 可以给图片设置固定宽高，避免拉伸变形 */
  width: 150px;
  height: 150px;
}
.title {
  font-weight: bold;
  margin-top: 8px;
}
.subtitle {
  font-size: 0.9em;
  color: #666;
}

修改后的HTML代码 #

<body>
  <div class="row">
    <!-- 第一个图片组合容器 -->
    <div class="img-container">
      <img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
      <div class="title">My title</div>
      <div class="subtitle">Subtitle</div>
    </div>
    <!-- 第二个图片组合容器 -->
    <div class="img-container">
      <img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
      <div class="title">My title</div>
      <div class="subtitle">Subtitle</div>
    </div>
  </div>
</body>

关键知识点 #

• display: inline-block：兼具行内元素的横向排列特性，和块级元素的容纳子元素能力，是不用Flex时实现横向布局的常用方法
• .row的text-align: center可以让所有inline-block的.img-container整体居中对齐
• 给组合容器加margin，能更精准地控制两个卡片之间的间距，布局更整洁

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