容器内元素布局求助：文本左图右+小屏flex-direction:column适配

核心问题分析 #

你当前的布局异常是因为**.wrapper未启用Flex布局**，内部的.text和.photo默认是块级元素会上下堆叠；同时原代码存在拼写错误（wrappper）和语法疏漏（height:500未加单位），导致样式不生效或布局混乱。

具体修改步骤 #

1. 给.wrapper添加Flex布局，实现文本居左、图片居右的横向排列：

   • 设置display: flex启用弹性布局
   • justify-content: space-between让左右元素分别贴紧容器两侧
   • align-items: center让文本和图片在垂直方向居中对齐
   • 修正拼写错误wrappper为wrapper，补充height:500px的单位

2. 添加响应式断点，小屏设备下切换为纵向布局：

   • 使用@media (max-width: 768px)触发响应式逻辑
   • 将.wrapper的flex-direction改为column，实现元素纵向排列
   • 调整容器宽度为90%适配屏幕，图片宽度改为100%避免溢出

3. 优化细节：给文本添加最大宽度提升可读性，纵向布局时给图片添加顶部间距避免拥挤。

修改后的完整代码 #

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper { /* 修正拼写错误 */
  width: 800px;
  height: 500px; /* 补充单位px */
  padding: 2vmin;
  background-color: pink;
  border-radius: 20px;
  overflow: hidden;
  display: flex; /* 启用Flex布局 */
  justify-content: space-between; /* 左右元素分布 */
  align-items: center; /* 垂直居中 */
  gap: 2vmin; /* 元素间基础间距 */
}
.text {
  max-width: 60%; /* 限制文本宽度，提升可读性 */
}
.text h1 {
  font-size: 17px;
  margin-bottom: 1rem;
}
.text p {
  font-size: 15px;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.text a {
  text-decoration: none;
  padding: 7px 25px;
  border-radius: 10px;
  color: #fff;
  background-color: blue;
}
.photo img {
  width: 200px;
  height: 200px;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}

/* 小屏响应式适配 */
@media (max-width: 768px) {
  .wrapper {
    width: 90%; /* 适配屏幕宽度 */
    height: auto; /* 高度随内容自适应 */
    flex-direction: column; /* 切换为纵向布局 */
    align-items: flex-start; /* 文本保持居左 */
  }
  .text {
    max-width: 100%;
  }
  .photo {
    margin-top: 1.5rem; /* 纵向布局时拉开与文本的距离 */
    width: 100%;
  }
  .photo img {
    width: 100%;
    height: auto; /* 图片高度自适应 */
  }
}

HTML代码

<div class="container">
  <div class="wrapper"> <!-- 修正拼写错误 -->
    <div class="text">
      <h1>Test text</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id modi maxime sit dolorem tempora! Ea porro ipsum earum perspiciatis maiores, distinctio, accusamus voluptatibus repellat magni sint exercitationem quia. Tenetur, porro!</p>
      <a href="#!">test button</a>
    </div>
    <div class="photo">
      <img src="https://framerusercontent.com/images/CMlJeFc6gnfpf0Q18wwTFJ570Vw.png" alt="示例图片">
    </div>
  </div>
</div>

关键说明 #

• Flex布局的核心是给需要控制内部元素排列的容器（这里是.wrapper）添加display: flex，而非仅给外层.container设置
• 响应式断点宽度可根据需求调整（如改为600px），height: auto确保小屏容器高度随内容变化，避免溢出

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