电商网站Banner无法横向排列求助：如何实现两Banner水平对齐？

当前两个Banner垂直排列的原因是它们的父容器（<section id="sm-banner">）没有设置横向排列的布局规则，默认情况下块级元素会垂直堆叠。以下是具体的调整方案：

核心修改思路 #

给父容器添加Flex布局，让内部的两个Banner横向排列；同时优化子Banner的样式，减少冗余代码。

修改后的代码 #

CSS代码 #

/* 父容器设置Flex布局，控制两个Banner横向排列 */
#sm-banner {
  display: flex;
  gap: 20px; /* 可选：设置两个Banner之间的间距 */
  flex-wrap: wrap; /* 可选：小屏幕下自动换行，避免溢出 */
}

/* 抽离通用样式，减少代码冗余 */
.banner-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1; /* 让两个Banner平分父容器宽度，替代固定min-width */
  min-width: 300px; /* 小屏幕下的最小宽度，适配响应式 */
  height: 50vh;
  background-size: cover;
  background-position: center;
  padding: 10px;
}

/* 各自设置背景图 */
.banner-box {
  background-image: url(img/banner/b17.jpg);
}

.banner-box2 {
  background-image: url(/img/banner/b18.jpg);
}

HTML代码 #

<section id="sm-banner" class="section-p1">
  <div class="banner-item banner-box">
    <h4>Crazy deals</h4>
    <h2>buy 1 get 1 Free</h2>
    <button>Learn More</button>
  </div>
  <div class="banner-item banner-box2">
    <h4>Crazy deals</h4>
    <h2>buy 1 get 1 Free</h2>
    <button>Learn More</button>
  </div>
</section>

关键说明 #

• 父容器#sm-banner的display: flex是实现横向排列的核心，Flex布局默认会让子元素沿主轴（横向）排列。
• 使用flex: 1替代固定的min-width: 580px，可以让两个Banner自适应父容器宽度、平分空间，同时设置min-width保证小屏幕下的显示效果。
• 抽离.banner-item通用类，避免重复编写相同样式，让代码更易维护。

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