使用Grid和Flexbox调整显示项消除Logo与文本容器间距并右对齐文本

云原生阿岚

2026-9-30

问题根因

外层.container设置了justify-items: center，会让两个grid子项在各自列内居中，列宽分配逻辑不紧凑
文本容器.container__overlay设置了margin-left: auto，会强制把容器推到最右侧，自然和左侧logo之间产生大量空白
grid列定义为两个auto，没有做贴合内容的宽度控制

修复方案

修改.container和.container__overlay的对应属性即可，调整后的核心SCSS代码如下：

.container {
  width: 100%;
  margin-top: 5em;
  display: grid;
  // 第一列宽度自适应logo内容，第二列占剩余空间
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  // 整体grid内容靠右对齐，取消子项居中配置
  justify-content: end;
  // 移除无用的浮动和margin配置
  float: none;
  margin-left: 0 !important;
  margin-right: 0;

  &__overlay {
    background-color: #48525D;
    border-radius: 129.5px 0px 0px 129.5px;
    padding: 4% 4%;
    max-width: 1200px;
    // 让文本容器在第二列内靠右对齐
    justify-self: end;

    &-item {
      display: flex;
      align-items: center;
      justify-content: left;
      // 若需要控制logo和文本容器的间距，可在这里加margin-right
      // margin-right: 16px;
    }
  }
}