如何使不同max-width的两个section内指定元素左对齐？

我来帮你搞定这个布局对齐的需求！核心问题在于两个section的容器宽度和内边距设置不一致，导致它们的内容无法对齐。下面是具体的分析和解决方案：

问题分析 #

• Hero section的容器.Hero-layout最大宽度是1920px，大屏下还去掉了右侧内边距；
• PaginaIntro section直接用1320px的最大宽度居中，两者的内容基准线不一样，自然无法让Hero-image和PaginaIntro-tekst的左侧对齐。

解决方案 #

我们可以通过统一容器基准和灵活的margin控制来实现对齐，同时用CSS变量让样式更易维护：

修改后的CSS代码 #

:root {
  --content-padding: 20px;
  --hero-max-width: 1920px;
  --intro-max-width: 1320px;
  --text-column-width: 280px;
  --text-column-gap: 40px;
}

.Hero { 
  padding-top: 30px; 
  padding-bottom: 30px; 
  background-color: green; 
  color: white; 
} 
@media screen and (min-width: 48em) { 
  .Hero { 
    padding-top: 40px; 
    padding-bottom: 40px; 
  } 
} 
@media screen and (min-width: 64em) { 
  .Hero { 
    padding-top: 80px; 
    padding-bottom: 80px; 
  } 
} 
.Hero-layout { 
  display: flex; 
  justify-content: space-between; 
  flex-direction: column; 
  padding-left: var(--content-padding); 
  padding-right: var(--content-padding); 
  margin: 0 auto; 
  max-width: var(--hero-max-width); 
} 
.Hero-tekst { 
  width: var(--text-column-width); 
  margin-right: var(--text-column-gap); 
} 
.Hero-image { 
  max-width: 800px; 
  width: 100%; 
  margin-top: 10px; 
} 
@media screen and (min-width: 64em) { 
  .Hero-layout { 
    flex-direction: row; 
    align-items: center;
    /* 恢复右侧内边距，保持容器一致性 */
    padding-right: var(--content-padding);
  } 
  .Hero-image { 
    margin-top: 0;
    /* 自动左外边距让图片右对齐，匹配Intro文本的起始位置 */
    margin-left: auto;
  } 
}

/* 给Intro添加外层容器，和Hero用相同的最大宽度基准 */
.PaginaIntro-container {
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
  margin: 0 auto;
  max-width: var(--hero-max-width);
}
.PaginaIntro { 
  max-width: var(--intro-max-width); 
  width: 100%; 
  display: flex; 
  margin: 0 auto; 
  justify-content: space-between; 
} 
.PaginaIntro-heading { 
  width: var(--text-column-width); 
  margin-right: var(--text-column-gap); 
} 
.PaginaIntro-tekst { 
  max-width: 800px; 
  width: 100%; 
}

修改后的HTML代码 #

<section class="Hero"> 
  <div class="Hero-layout"> 
    <div class="Hero-tekst"> 
      <h3>Bla bla</h3> 
      <button>Play</button> 
    </div> 
    <img class="Hero-image" src="https://source.unsplash.com/random" alt="palm" /> 
  </div> 
</section> 
<!-- 给Intro添加外层容器，对齐Hero的基准 -->
<section class="PaginaIntro-container">
  <div class="PaginaIntro"> 
    <h2 class="PaginaIntro-heading">Bla</h2> 
    <p class="PaginaIntro-tekst">OLorem dollar ipsum OLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsumOLorem dollar ipsum</p> 
  </div>
</section>

方案说明 #

1. CSS变量统一配置：把重复使用的间距、宽度值定义在:root里，后续修改只需调整一处；
2. 统一容器基准：给PaginaIntro添加了和Hero-layout同最大宽度的外层容器，让两个section的内容都在同一基准线内；
3. 自动margin对齐：大屏下给Hero-image设置margin-left: auto，让它自动右对齐，刚好和PaginaIntro-tekst的左侧位置重合，实现完美对齐。

这样修改后，在屏幕宽度≥64em时，Hero-image的左边缘就会和PaginaIntro-tekst的左边缘精准对齐，同时保留了两个section各自的最大宽度限制。

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