实现两div并排及上下区块图文左右交替布局的技术咨询

嘿，我来帮你搞定这个布局需求！你想要的顶部区块图左文右、底部区块文左图右的并排效果，用Flexbox来实现是最简洁可靠的，我帮你调整了现有代码，解决了布局错乱的问题：

问题分析 #

你现有代码里的几个小问题导致布局没达到预期：

• .alignnone 设置了固定height:20px，直接把图片压扁了
• .top和.bottom用了inline-block但没控制宽度，元素没法合理分配空间
• 没有明确的排列规则，导致图片和文本没法正确左右对齐

修改后的完整代码 #

CSS 部分

/* 先重置默认样式，避免浏览器干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#content {
  background-color: #D7DBDD;
  padding: 6%;
  margin: 0; /* 去掉负margin避免溢出 */
}

h2 {
  text-align: center;
  margin-bottom: 2rem;
}

/* 统一区块样式，用Flex实现并排 */
.section {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 2rem; /* 图片和文本之间的间距 */
  margin-bottom: 3rem;
}

/* 顶部区块：图左文右（默认flex-direction: row） */
.section--top .section__image {
  width: 30%;
}

.section--top .section__content {
  width: 70%;
}

/* 底部区块：文左图右，用row-reverse反转排列 */
.section--bottom {
  flex-direction: row-reverse;
}

.section--bottom .section__image {
  width: 30%;
}

.section--bottom .section__content {
  width: 70%;
}

/* 图片样式，去掉错误的固定高度 */
.section__image {
  display: block;
  max-width: 100%;
  height: auto; /* 保持图片比例 */
}

.button {
  text-decoration: none;
  color: #000;
  border-radius: 5px;
  border: 1px solid;
  padding: 10px 20px;
  background-color: #43dbdb;
  display: inline-block; /* 用inline-block替代float，避免布局塌陷 */
  margin-top: 1rem;
}

h3 {
  margin-bottom: 1rem;
  color: #333;
}

p {
  line-height: 1.6;
  color: #555;
}

HTML 部分

<div id="content">
  <h2>My Chef Profile</h2>
  
  <!-- 顶部区块：图左文右 -->
  <div class="section section--top">
    <img src="https://privatechefanna.co.za/wp-content/uploads/2018/01/IMG_3695.jpg" alt="Anna" class="section__image" />
    <div class="section__content">
      <h3>ABOUT ME</h3>
      <p>.....这里放你的关于我文本内容.....</p>
      <a href="#" class="button">Learn More</a>
    </div>
  </div>
  
  <!-- 底部区块：文左图右 -->
  <div class="section section--bottom">
    <img src="https://privatechefanna.co.za/wp-content/uploads/2018/01/IMG_3713.jpg" alt="Anna" class="section__image" />
    <div class="section__content">
      <h3>WHAT I DO</h3>
      <p>.....这里放你的服务内容文本.....</p>
      <a href="#" class="button">View Services</a>
    </div>
  </div>
</div>

关键调整说明 #

• 用Flexbox替代inline-block和float，布局更稳定，容易控制对齐和排列方向
• 给区块和内容设置明确的宽度比例（30%图片 + 70%文本），确保空间分配合理
• 去掉了错误的图片固定高度，用height:auto保持图片原始比例
• 底部区块只需要设置flex-direction: row-reverse，就能轻松实现文左图右的反转效果
• 添加了gap属性控制图片和文本的间距，比用margin更直观

这样调整后，就能完美实现你想要的布局效果啦！

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