如何使用HTML和CSS实现两个div元素并排布局？

最推荐使用Flex弹性布局实现，代码简洁、适配性强，不会出现传统浮动布局的高度错位、清除浮动等冗余问题，具体实现代码如下：

核心HTML结构 #

外层用一个容器包裹两个并排的子div，分别对应头像区、用户信息区：

<div class="user-card">
  <!-- 头像区块 -->
  <div class="user-avatar">
    <img src="替换为实际头像资源路径" alt="用户头像">
  </div>
  <!-- 用户信息区块 -->
  <div class="user-info">
    <p class="username">这里放用户名</p>
    <p class="email">这里放用户邮箱</p>
    <!-- 其余用户信息可直接在该div内追加 -->
  </div>
</div>

对应CSS样式代码 #

/* 全局盒模型重置，避免默认边距、宽高计算规则干扰布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.user-card {
  display: flex; /* 核心属性：触发弹性布局，直接让子元素横向并排 */
  align-items: center; /* 让头像和文字内容垂直居中对齐，视觉效果更协调 */
  gap: 16px; /* 控制头像和信息区之间的间距，可按需调整数值 */
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  width: fit-content;
}

/* 头像样式 */
.user-avatar img {
  width: 64px; /* 头像尺寸可按需修改 */
  height: 64px;
  border-radius: 50%; /* 如需方形头像删除这行即可 */
  object-fit: cover; /* 保证图片按比例填充，不会拉伸变形 */
}

/* 用户信息样式 */
.user-info .username {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.user-info .email {
  font-size: 14px;
  color: #666;
}

补充说明 #

• 该方案在所有现代浏览器中均可完美运行，无需额外兼容处理；如果需要适配IE9及更早版本，可以替换为inline-block布局方案，但目前这类老旧浏览器市场占比极低，无特殊需求不需要额外适配。
• 不推荐使用浮动布局实现该效果，后续需要额外处理高度塌陷、清除浮动等问题，维护成本更高。
• 所有尺寸、颜色、间距数值都可以根据实际设计需求直接调整。

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