实现右侧响应式元素：与左侧图片等高的div适配问题

我懂你现在的困扰——右侧的描述div没法和左侧图片保持稳定的等高，而且调整窗口大小时，文本还会把容器高度给拉变形。咱们换个更适合响应式的布局思路来解决这个问题，用Flexbox就能轻松搞定：

核心问题分析 #

你原来的代码用了固定的height:60em，还有基于父元素固定高度的百分比高度，这种方式在窗口缩放时很容易失效，而且文本内容会打破原本的高度设定。

修改后的代码实现 #

HTML 结构

<section>
  <article id="left-side">
    <div class="image">
      <img src="img1.jpg" alt="示例图片">
    </div>
  </article>
  <article id="right-side">
    <div class="description">这里可以添加任意文本内容，不会再随意拉伸容器高度啦</div>
  </article>
</section>

CSS 样式

section {
  display: flex; /* 把section变成flex容器，子元素自动等高 */
  width: 100%;
}

#left-side, #right-side {
  flex: 1; /* 让左右两个article平分可用宽度，响应式自动调整 */
  display: flex;
  align-items: center; /* 让内部元素垂直居中 */
  justify-content: center; /* 让内部元素水平居中 */
}

#left-side {
  background-color: black;
}

#left-side .image img {
  border: solid #A98646 2px;
  border-bottom: none;
  max-width: 50%; /* 限制图片最大宽度，避免溢出 */
  height: auto; /* 保持图片比例，缩放时不会变形 */
}

#right-side {
  background-color: red;
}

#right-side .description {
  width: 50%;
  background: green;
  padding: 1rem; /* 加一点内边距，让文本不会贴边 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25%; /* 可以设置最小高度，保证容器不会太矮 */
}

为什么这样改能解决问题 #

• Flexbox布局：父容器设置display:flex后，所有子flex项会自动保持等高，完全不用手动设置固定高度，完美适配响应式场景。
• 图片自适应：height:auto保证图片缩放时比例不变，不会被拉伸变形；max-width限制图片最大宽度，避免超出容器。
• 文本容器稳定：给描述容器设置min-height可以保证它不会因为文本太少而缩得太矮，同时Flex的居中布局让文本在容器里显示更美观，不会因为文本内容改变而随意拉伸容器高度。

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