HTML签名卡片排版问题：图片旁文本错位如何修正？

你的问题出在：图片使用float: left后，每个<p>都是独立块级元素，当图片高度超过前几个<p>的总高度时，后续<p>就会跑到图片下方。要让所有签名文本保持在图片右侧，有两种可靠的修改方式：

方式一：修复浮动布局 #

通过给所有文本套容器并触发BFC，解决浮动带来的排版问题：

修改后的CSS #

img {
  width: 100px;
  border-radius: 50%; /* 改用百分比，适配任意尺寸的圆形头像 */
  float: left;
  margin-right: 10px;
}

p.Name {
  font-weight: bold;
}

.text-container {
  overflow: hidden; /* 触发BFC，让容器包裹内部元素，避免文本错位 */
}

修改后的HTML #

<img src="https://via.placeholder.com/150">
<div class="text-container">
  <p class="Name">John Smith</p>
  <p>123 Main Street</p>
  <p>Anytown, USA</p>
  <p>123 4567</p>
  <p>johnsmith@gmail.com</p>
</div>

方式二：使用Flex布局（推荐） #

Flex是现代布局方案，比浮动更稳定直观，无需处理浮动清除问题：

修改后的CSS #

.profile-card {
  display: flex;
  align-items: flex-start; /* 让图片和文本顶部对齐 */
  gap: 10px; /* 控制图片与文本的间距 */
}

.profile-card img {
  width: 100px;
  border-radius: 50%;
}

.profile-card p.Name {
  font-weight: bold;
  margin-top: 0; /* 移除默认上边距，让名字和图片顶部对齐更整齐 */
}

修改后的HTML #

<div class="profile-card">
  <img src="https://via.placeholder.com/150">
  <div class="text-container">
    <p class="Name">John Smith</p>
    <p>123 Main Street</p>
    <p>Anytown, USA</p>
    <p>123 4567</p>
    <p>johnsmith@gmail.com</p>
  </div>
</div>

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