如何实现两行网站标题且将Logo置于第一行右侧？

问题说明 #

需要实现网站头部布局：网站名称分为两行展示，Logo位于第一行标题的右侧。尝试过CSS Grid和Flex布局，目前只能通过absolute定位实现，但这会导致网站失去响应性与可扩展性。当前代码的问题是Logo位于左侧并挤压标题，期望Logo位于第一行标题右侧且不影响标题正常显示。

当前代码 #

CSS #

.header.main {
  margin-top: 10%;
}

.site-title {
  display: flex;
}

.big-logo {
  float: right;
  margin-left: 300px;
  width: 141px;
  height: 136px;
  max-width: 100%;
  height: auto;
}

.graficlogo {
  width: 100%;
  height: auto;
  object-fit: contain;
}

h1.main-title {
  position: relative;
  font-family: 'Neue Machina';
  font-style: normal;
  font-weight: 800;
  font-size: 128px;
  line-height: 95.36px;
  color: #EDFB3A;
}

p {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  text-transform: lowercase;
  color: #FFFFFF;
}

HTML #

<div class="header main">
  <div class="site-title">
    <div class="big-logo">
      <img class="graficlogo" src="assets/img/Logo.png" alt="Logo">
    </div>
    <h1 class="main-title">
      мои <br> достижения
    </h1>
  </div>
  <p>
    онлайн-платформа централизации достижений и развития активной деятельности
  </p>
</div>

解决方案：使用CSS Grid实现响应式布局 #

通过CSS Grid可以轻松实现标题跨两行、Logo仅占据第一行右侧的布局，同时保持响应性：

修改后的CSS #

.header.main {
  margin-top: 10%;
}

.site-title {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列标题占剩余宽度，第二列Logo自适应宽度 */
  align-items: start; /* 顶部对齐 */
  gap: 1rem; /* 可选：添加标题与Logo的间距 */
}

.big-logo {
  width: 141px;
  height: 136px;
  max-width: 100%;
  height: auto;
}

.graficlogo {
  width: 100%;
  height: auto;
  object-fit: contain;
}

h1.main-title {
  grid-row: 1 / span 2; /* 标题占据两行网格 */
  margin: 0;
  font-family: 'Neue Machina';
  font-style: normal;
  font-weight: 800;
  font-size: 128px;
  line-height: 95.36px;
  color: #EDFB3A;
}

p {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  text-transform: lowercase;
  color: #FFFFFF;
}

布局原理 #

• .site-title 使用grid-template-columns: 1fr auto，让标题列占据剩余空间，Logo列仅占自身宽度
• 给h1.main-title设置grid-row: 1 / span 2，使其横跨两行网格，这样第二行标题会自动占满整个宽度，不会被Logo遮挡
• 移除了原代码中导致布局混乱的float和固定margin-left，保证响应性

响应式适配（可选） #

如果需要在小屏幕上调整布局，可添加媒体查询：

@media (max-width: 768px) {
  .site-title {
    grid-template-columns: 1fr; /* 小屏幕下改为单列布局 */
  }
  h1.main-title {
    grid-row: auto; /* 标题不再跨两行 */
    font-size: 64px; /* 缩小标题字号 */
    line-height: 50px;
  }
  .big-logo {
    order: -1; /* Logo移到标题上方 */
    margin: 0 auto 1rem; /* 居中并添加底部间距 */
  }
}

内容的提问来源于stack exchange，提问作者Unseeing-Quality