如何实现固定尺寸响应式双列Div布局（解决容器冲突）

关键改动说明 #

• 给列容器设置固定宽高比，确保缩放时保持350x217px的比例，同时限制最大宽度避免超出需求尺寸
• 实现左侧文本「水平居中但左对齐」的布局：外层容器水平居中对齐，内层文本左对齐
• 优化父容器布局，避免与页面其他容器冲突：通过max-width和margin:auto控制整体范围，添加间距防止挤压
• 小屏模式下自动堆叠，保持每列的宽高比例和布局一致性

修改后的完整代码 #

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 父容器：大屏并排，居中显示，避免与其他容器冲突 */
.row {
  display: flex;
  gap: 20px; /* 列之间的间距，可调整 */
  max-width: 720px; /* 两列350px + 20px间距，刚好容纳 */
  margin: 20px auto; /* 上下留白，水平居中 */
  flex-wrap: wrap; /* 防止极端小屏提前堆叠 */
}

/* 列容器：固定宽高比，限制最大尺寸 */
.column {
  max-width: 350px;
  width: 100%;
  aspect-ratio: 350/217; /* 保持350x217的比例 */
}

.left {
  background-color: #e0e620;
  display: flex;
  justify-content: center; /* 内部元素水平居中 */
  align-items: center; /* 内部元素垂直居中（可选，按需调整） */
}

/* 左侧文本容器：左对齐，设置内边距 */
.center {
  text-align: left;
  width: 85%; /* 控制文本宽度，避免贴边 */
  padding: 20px;
  border: 3px solid green;
}

.right {
  background-color: #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图片填充容器，保持比例 */
img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片自适应容器，裁剪或拉伸保持比例 */
  display: block;
}

/* 小屏堆叠布局 */
@media screen and (max-width: 768px) {
  .row {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    padding: 0 20px; /* 左右留白，避免贴边 */
  }
}

HTML

<div class="row">
  <div class="column left">
    <div class="center">
      The Info.<br>
      <a class="link-button-green" href="" title="Info guide">Download now</a>
    </div>
  </div>

  <div class="column right">
    <img src="https://via.placeholder.com/350x217.jpg">
  </div>
</div>

核心细节解释 #

1. 宽高比控制：使用aspect-ratio:350/217确保列容器始终保持需求的尺寸比例，大屏时达到最大350px宽度，小屏时按比例缩小
2. 文本布局：.left用flex实现内部容器水平居中，.center设置text-align:left让文本左对齐，同时控制宽度避免内容贴边
3. 容器冲突解决：.row设置max-width限制整体宽度，margin:auto水平居中，添加gap和内边距避免与页面其他元素挤压
4. 图片适配：object-fit:cover确保图片填满容器且不拉伸变形，保持原始比例

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