CSS左右Div图片文字浮动不同步问题求助（不修改H2标题）

问题根源 #

右侧.right卡片同时使用inline-block和float: right，加上较长的H2标题在窗口缩放时会打破排版节奏，导致与左侧卡片的文字环绕不同步。浮动与inline-block混合布局容易引发这类排版错位问题。

可行方案（无需修改H2标题） #

推荐用Flex布局替代混合浮动+inline-block，让两个卡片的排版规则完全统一，从根源解决同步问题：

1. 重构.main容器布局

将.main设置为Flex容器，让左右卡片自动分配空间，同时用gap控制间距：

.main {
  flex: 1;
  display: flex;
  gap: 4%; /* 替代inline-block默认间距，排版更可控 */
}

2. 统一左右卡片样式

移除右侧卡片的float: right，简化左右卡片的布局规则：

.left, .right {
  width: 48%;
  /* 移除inline-block和float，由Flex控制布局 */
}

3. 优化移动端响应式布局

在移动端断点中，将Flex方向改为垂直排列：

@media (max-width: 480px) {
  .main {
    flex-direction: column;
    gap: 20px;
  }
  
  .left, .right {
    width: 100%;
  }
  
  /* 保留其他移动端样式 */
}

4. 可选：清除内部浮动影响

给卡片添加overflow: hidden，确保内部浮动的图片不会破坏容器高度：

.card {
  overflow: hidden;
}

修改后的完整CSS代码 #

body {
  font-family: "Poppins", sans-serif;
  margin: 50px 50px 0 50px;
  background-color: #faf9f6;
  display: flex; 
  flex-direction: column; 
  min-height: 95vh;
}

p {
  display: inline;
}

span {
  color: midnightblue;
}

/* 统一左右卡片内图片的浮动样式 */
.card > .tile-image {
  width: 50%;
  float: left; 
  margin-right: 50px;
}

.left, .right {
  width: 48%;
}

.main {
  flex: 1;
  display: flex;
  gap: 4%;
}

.card {
  overflow: hidden; /* 清除内部浮动对容器高度的影响 */
}

h1 {
  font-size: 5rem;
}

footer {
  text-align: right;
  color: midnightblue;
}

@media (max-width: 480px) {
  .main {
    flex-direction: column;
    gap: 20px;
  }
  
  .left, .right {
    width: 100%;
  }

  .tile-image {
    height: 100%;
    width: 100%;
  }

  div > h1 {
    font-size: 16px;
  }

  .logo {
    height: 50%;
    width: 50%;
  }

  footer > p {
    text-align: center;
  }
}

方案有效性说明 #

• Flex布局是现代一维布局方案，能确保两个卡片的宽度、对齐规则完全一致，窗口缩放时同步响应；
• 移除了容易引发冲突的float: right，避免混合布局导致的排版滞后；
• gap属性替代inline-block默认间距，排版精度更高；
• overflow: hidden稳定了卡片容器高度，避免内部浮动元素引发的布局异常。

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