如何将页面元素分别对齐至屏幕最左端与最右端

架构老林

2026-9-24

左logo右图片两端对齐布局解决方案

方案1：Flex布局（推荐，现代浏览器通用）

Flex是当前实现这类布局的首选方案，写法简洁，兼容到IE10及以上版本。
核心实现逻辑是给父容器设置弹性布局，通过justify-content: space-between实现两端自动对齐：

<div class="header-container">
  <img src="logo路径" alt="站点logo">
  <img src="右侧图片路径" alt="右侧展示图">
</div>
<style>
.header-container {
  /* 开启弹性布局 */
  display: flex;
  /* 子元素两端对齐，左侧元素贴左、右侧元素贴右 */
  justify-content: space-between;
  /* 子元素垂直居中对齐 */
  align-items: center;
  /* 占满全屏宽度 */
  width: 100%;
  /* 可选：添加左右内边距避免元素贴死屏幕边缘 */
  padding: 0 15px;
  /* 确保padding不会撑宽容器 */
  box-sizing: border-box;
}
</style>

方案2：Float布局（兼容低版本浏览器）

如果需要兼容IE9及更早版本浏览器，可以使用浮动方案：

<div class="header-container">
  <img src="logo路径" alt="站点logo" style="float: left;">
  <img src="右侧图片路径" alt="右侧展示图" style="float: right;">
  <!-- 清除浮动避免父容器高度塌陷 -->
  <div style="clear: both;"></div>
</div>
<style>
.header-container {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}
</style>

方案3：Grid布局（适合后续扩展）

如果后续需要在头部中间添加导航、搜索栏等元素，用Grid布局扩展性更强：

.header-container {
  display: grid;
  /* 三列布局，左右列宽度自适应内容，中间列占满剩余空间，后续中间加元素直接插入即可 */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}