关于图片与文本响应式布局及文本排版优化的技术咨询

一、响应式布局是否只能用Media Queries？ #

不是，除了Media Queries，还可以利用Flexbox的flex-wrap属性结合弹性项的最小宽度实现自动换行的响应式效果，无需手动写断点：

给包含图片和文本的容器.container2添加flex-wrap: wrap，同时给图片容器.image2和文本容器.content设置flex: 1 1 [最小宽度]（比如300px），当屏幕宽度不足以容纳两个弹性项的最小宽度之和时，布局会自动换行，图片会因.container2的justify-content: center属性居中，文本自然落到图片下方。

二、文本两端对齐且不溢出容器的设置方法 #

1. 两端对齐：给文本所在的p标签添加text-align: justify，同时设置text-align-last: justify解决最后一行对齐问题，兼容性较好。
2. 防止溢出：
   • 去掉文本容器.content固定的width: 50%，改用flex: 1让它自适应剩余空间，同时添加max-width: 100%避免超出父容器。
   • 添加overflow-wrap: break-word强制长单词换行，防止横向溢出。
   • 调整column2的溢出行为：原代码中column2的height: 100vh和overflow: hidden会截断过长文本，建议改为min-height: 100vh并设置overflow-y: auto，让容器可滚动显示全部内容。

修改后的完整代码 #

CSS

div.content {
  width: 100vw;
  display: flex;
}

div.column1 {
  width: 15%;
  background-color: #F7F7F7;
  overflow: hidden;
  height: 100vh;
}

div.column2 {
  width: 70%;
  min-height: 100vh; /* 替换固定高度，避免截断内容 */
  overflow-y: auto; /* 内容过长时允许垂直滚动 */
}

.banner {
  width: 100vw;
  height: 10vh;
}

.container2 {
  display: flex;
  align-items: center;
  padding-top: 3rem;
  justify-content: center;
  flex-wrap: wrap; /* 添加自动换行 */
  gap: 1rem; /* 可选：添加图片和文本的间距 */
}

.image2 {
  flex: 1 1 300px; /* 弹性布局，最小宽度300px */
  height: 60%;
  margin: 0;
  display: flex;
  justify-content: center; /* 确保图片在容器内居中 */
}

.image2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-sizing: border-box;
}

.content {
  flex: 1 1 300px; /* 弹性布局，最小宽度300px */
  overflow: hidden;
  padding-left: 1rem;
  max-width: 100%; /* 防止超出父容器 */
}

.content p {
  text-align: justify; /* 文本两端对齐 */
  text-align-last: justify; /* 最后一行两端对齐 */
  overflow-wrap: break-word; /* 长单词强制换行 */
}

HTML

<div class="content">
  <div class="column1">
  </div>
  <div class="column2">
    <div class="container2">
      <div class="image2">
        <img src="img/lobby.jpg" alt="大厅图片" /> <!-- 移除重复的image2类 -->
      </div>
      <div class="content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
  <div class="column1">
  </div>
</div>

补充说明 #

如果需要更精确控制断点（比如在特定屏幕尺寸下强制切换布局），Media Queries依然是可靠的选择，示例：

@media (max-width: 768px) {
  .container2 {
    flex-direction: column;
  }
  .content {
    padding-left: 0;
  }
}

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