如何利用Flex布局实现容器内三个Div的指定排版需求

需求回顾 #

• 第一个div（含span标签）位于容器左上角，需设置边距避免紧贴容器边缘
• 第二个div为图片容器，固定在容器右侧
• 第三个div（带社交媒体按钮）位于第一个div下方，且与第一个div保持间距

修正后的完整代码 #

HTML 代码 #

<div class="container">
  <div class="left-section">
    <div class="left-top">
      <div id="typewriter">
        <span class="text-1">Hi, I'm</span>
        <span class="text-2">Adam</span>
        <div class="text-3">I'm a <span class="typing"></span></div>
      </div>
    </div>
    <div class="left-bottom">
      <p class="social-media-title">Find Me On</p>
      <div class="buttons">
          <a href=""><i class="fab fa-github"></i></a>
          <a href=""><i class="fab fa-linkedin"></i></a>
          <a href=""><i class="fab fa-twitter"></i></a>
      </div>
    </div>
  </div>
  <div class="right-img">
    <img src="image.jpg" alt="adam-mohamed-web-developer">
  </div>
</div>

CSS 代码 #

/* 全局基础样式重置，避免默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
  padding: 20px; /* 容器内边距，避免内容紧贴容器边缘 */
}

/* 左侧区域容器，包裹top和bottom两个div */
.left-section {
  flex: 1; /* 占据剩余空间，与右侧图片容器形成合理分栏比例 */
  display: flex;
  flex-direction: column;
  gap: 40px; /* 控制top和bottom之间的间距 */
}

.left-top {
  padding: 15px; /* 内部边距，避免内容紧贴自身边缘 */
}

/* 打字机文本样式 */
.text-1, .text-2 {
  font-size: 4em;
  display: block; /* 让每个span单独占一行 */
}
.text-3 {
  font-size: 4em;
}

.left-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px; /* 标题与按钮组的间距 */
  padding: 15px;
}

.social-media-title {
  font-size: 1.5em;
  margin-bottom: 0; /* 用gap替代margin，布局更灵活 */
}

.buttons {
  display: flex;
  gap: 15px; /* 社交按钮之间的间距 */
}

.buttons a {
  font-size: 1.5em;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.buttons a:hover {
  color: #1c87c9;
}

.right-img {
  flex-basis: 30%; /* 固定右侧图片容器宽度占比 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-img img {
  max-width: 100%;
  height: auto; /* 图片自适应容器，避免溢出 */
  border-radius: 8px; /* 可选，优化图片视觉效果 */
}

/* 移动端响应式调整 */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
    gap: 30px;
  }
  .right-img {
    order: -1; /* 移动端图片移到最上方 */
  }
  .text-1, .text-2, .text-3 {
    font-size: 2.5em; /* 缩小移动端文本尺寸，提升适配性 */
  }
}

关键修正说明 #

1. 结构优化：新增.left-section容器包裹左侧两个div，通过flex-direction: column实现上下排列，用gap控制间距，布局逻辑更清晰
2. 边距设置：给容器和左侧两个div分别添加内边距，彻底解决内容紧贴边缘的问题
3. 分栏比例：左侧区域用flex:1占据剩余空间，右侧图片容器固定30%宽度，实现稳定的左右分栏布局
4. 图片适配：给图片添加自适应样式，防止溢出容器，保证不同屏幕下的显示效果
5. 响应式适配：移动端切换为垂直布局，调整元素顺序和文本尺寸，提升移动端体验

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