本文介绍一种语义清晰、无需绝对定位的纯 CSS 方案，通过将 Logo 内联嵌入 标签并配合 vertical-align 与合理盒模型控制，精准实现“标题分两行、Logo 紧贴第一行右侧”的视觉效果，兼顾可访问性、响应式与可维护性。

本文介绍一种语义清晰、无需绝对定位的纯 css 方案，通过将 logo 内联嵌入 `

` 标签并配合 `vertical-align` 与合理盒模型控制，精准实现“标题分两行右侧”的视觉效果，兼顾可访问性、响应式与可维护性。

在构建现代网页头部（header）时，常需兼顾设计表现与技术健壮性。题中需求——让标题「мои
достижения」分为两行显示，同时将 Logo 精准置于第一行末尾右侧（而非换行后或左侧）——看似简单，却极易因滥用 Float、position: absolute 或不当的 flex/Grid 布局导致结构僵化、响应失效、可访问性下降。

核心问题在于：原方案将 Logo 作为独立块级元素置于

外部，并依赖 float: right 和固定 margin-left: 300px 强行推离文本。这不仅破坏了标题语义完整性（Logo 实为品牌标识，逻辑上属于标题一部分），更因脱离文档流而丧失自适应能力。

✅ 推荐解法：将 Logo 作为内联元素直接嵌入

。此方式天然保持文档流，无需脱离布局，且在不同字号、屏幕宽度下自动适配。

以下是优化后的完整实现：

<div class="header main">   <div class="site-title">     <h1 class="main-title">       мои        @@##@@       <br> достижения     </h1>   </div>   <p>     онлайн-платформа централизации достижений и развития активной деятельности   </p> </div>

.header.main {   margin-top: 10%;   /* 可选：添加 padding 或 max-width 提升移动端体验 */ }  .site-title {   text-align: center; /* 居中整体标题区域 */ }  .main-title {   font-family: 'Neue Machina', sans-serif;   font-weight: 800;   font-size: 128px;   line-height: 0.75; /* 更紧凑的行高，避免第二行被撑开过远 */   color: #EDFB3A;   margin: 0;   display: inline-block; /* 确保 h1 可被父容器居中，且内部内联元素正常渲染 */ }  .graficlogo {   width: 141px;   height: 136px;   vertical-align: bottom; /* 关键！使图片底部与文字基线对齐，避免悬挂或下沉 */   margin-left: 16px; /* 微调 Logo 与文字间距，替代硬编码的 300px */ }  /* 响应式降级：在小屏幕上缩小标题与 Logo */ @media (max-width: 768px) {   .main-title {     font-size: 80px;     line-height: 0.8;   }   .graficlogo {     width: 90px;     height: 86px;     margin-left: 8px;   } }  p {   font-family: 'Montserrat', sans-serif;   font-weight: 400;   font-size: 16px;   line-height: 1.5;   text-transform: lowercase;   color: #FFFFFF;   margin-top: 16px;   text-align: center; }

? 关键要点说明：

• 语义优先：Logo 是品牌标识，属于
  

  的视觉与语义组成部分，不应剥离为独立区块；

• vertical-align: bottom 是成败关键：它确保图片底部与文字基线严格对齐，避免因默认 baseline 对齐导致 Logo “悬空”或下沉；
• 移除 float 与 position: absolute：彻底规避脱离文档流带来的不可预测布局行为；
• line-height: 0.75 配合
  实现可控换行：比 flex-wrap 或 Grid 更轻量，且兼容性极佳（支持 IE9+）；
• 响应式预留：通过媒体查询动态缩放字体与 Logo，保障移动设备可读性。

⚠️ 注意事项：

• 若 Logo 需点击跳转首页，请用 包裹 ，并为链接添加 text-decoration: none 和 outline: none（聚焦时需确保可访问性）；
• alt 属性内容已按无障碍最佳实践优化为描述性文本（非仅“Logo”），提升屏幕阅读器体验；
• 避免对 .main-title 设置 white-space: nowrap，否则
  将失效。

该方案简洁、健壮、可扩展，既满足设计师对视觉精度的要求，又符合前端工程化标准——结构语义化、样式可维护、响应无断点。