如何在不使用Flexbox、Grid或表格的情况下对称对齐两行图标

我懂你想要的效果——图标和对应文本块整齐排列，还不能用现代布局工具。咱们一步步来修复你的代码：

当前代码的核心问题 #

你用了inline-block但没处理两个关键痛点：

• inline-block默认基线对齐，会导致带多行文本的块和其他块错位
• 元素间的空白字符会产生额外间隙，破坏布局
• 没给元素设置合适宽度，导致排列混乱

具体修改步骤 #

下面是需要调整的CSS细节：

1. 强制垂直顶部对齐
   给.icon添加vertical-align: top，让所有图标块从顶部开始对齐，不管文本行数多少：

.icon{
  text-align: center;
  vertical-align: top; /* 新增：让块顶部对齐 */
}

2. 消除inline-block的间隙
   给父元素（.row和.social-media-container）设置font-size: 0，然后在.icon里重置字体大小，彻底去掉元素间的空白间隙：

.row, .social-media-container {
  font-size: 0; /* 新增：消除inline-block元素间的空白 */
}

.icon{
  text-align: center;
  vertical-align: top;
  font-size: 16px; /* 新增：重置字体大小，避免文本消失 */
}

3. 设置宽度控制排列
   根据布局需求给.icon设置百分比宽度，确保它们在一行均匀分布：

• 第一行3个图标，每个占1/3宽度：

.row .icon {
  width: 33.33%; /* 新增：3个图标均分一行宽度 */
}

• 第二行2个社交图标，每个占一半宽度：

.social-media-container .icon {
  width: 50%; /* 新增：2个图标均分一行宽度 */
}

4. 优化容器样式
   给section加一点内边距，避免内容贴在灰色背景的边缘：

section{
  margin: 30px 0;
  background-color: #ccc;
  padding: 0 10px; /* 新增：避免内容贴边 */
}

修改后的完整代码 #

CSS部分：

/* ########################################################################## */
/* Global Settings */
/* ########################################################################## */
html, body{
 width: 100%;
 height:100%;
 font-family: Arial, sans-serif;
 font-size: 16px;
}
*{
 margin: 0;
 padding: 0;
 list-style: none;
 box-sizing: border-box;
}
/* ########################################################################## */
/* Clearfix-Hack */
/* ########################################################################## */
.clearfix::after{
 content:"";
 clear:both;
 display: block;
}
/* ########################################################################## */
/* Entire Page */
/* ########################################################################## */
.entire-page{
 margin: 0 15%;
}
/* ########################################################################## */
/* Contact */
/* ########################################################################## */
section{
 margin: 30px 0;
 background-color: #ccc;
 padding: 0 10px; /* 新增 */
}
.headline{
 text-align: center;
 margin: 30px 0;
 padding: 10px;
}
.row, .social-media-container {
 font-size: 0; /* 新增：消除inline-block间隙 */
}
.row > div{
 display:inline-block;
}
.social-media-container > div{
 display: inline-block;
}
.icon{
 text-align: center;
 vertical-align: top; /* 新增：顶部对齐 */
 font-size: 16px; /* 新增：重置字体大小 */
}
.row .icon {
 width: 33.33%; /* 新增：3个图标均分宽度 */
}
.social-media-container .icon {
 width: 50%; /* 新增：2个社交图标均分宽度 */
}

HTML部分（无需修改，保持原结构即可）：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="src/css/styles5.css">
</head>
<body>
 <!-- ########################################################################## -->
 <!-- Entire Page -->
 <!-- ########################################################################## -->
 <div class="entire-page">
 <!-- ########################################################################## -->
 <!-- Contact -->
 <!-- ########################################################################## -->
 <section>
 <div>
 <div class="headline">
 <span>Lorem ipsum dolor sit: </span>
 </div>
 <div class="row clearfix">
 <div class="icon">
 <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"></div>
 <div>
 <p>1234 – 567 890 123</p>
 </div>
 </div>
 <div class="icon">
 <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"></div>
 <div>
 <p>john@doe.com</p>
 </div>
 </div>
 <div class="icon">
 <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"></div>
 <div>
 <p>John Doe</p>
 </div>
 <div>
 <p>USA</p>
 </div>
 <div>
 <p>12345 City</p>
 </div>
 </div>
 </div>
 <div class="row clearfix">
 <div class="social-media-container clearfix">
 <div class="icon">
 <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"></div>
 <div>
 <p>facebook.com/johndoe</p>
 </div>
 </div>
 <div class="icon">
 <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"></div>
 <div>
 <p>twitter.com/johndoe</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
 </div>
</body>
</html>

修改后，所有图标块会整齐顶部对齐，文本不管多少行都不会打乱布局，且元素间没有多余间隙，完全符合不用Flexbox/Grid/表格的要求。

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