如何将图片移至浏览器右端且不破坏wrapper容器布局？

要把图片固定在浏览器最右端，同时让文本保留在wrapper容器内不破坏原有布局，有两种简单可靠的方法：

方法一：绝对定位（最直接） #

利用绝对定位脱离文档流的特性，让图片直接贴合浏览器右侧，完全不影响wrapper的布局：

HTML 结构 #

<div class="wrapper">
  <p>这里是需要留在wrapper内的文本内容，保持原有居中、宽度限制等布局...</p>
</div>
<img src="your-image-path.jpg" class="right-floated-img" alt="右侧展示图片">

CSS 样式 #

/* 给顶层容器（比如body）设置相对定位，作为图片绝对定位的参考 */
body {
  position: relative;
  margin: 0; /* 清除默认边距，避免图片右侧出现空隙 */
}

/* 保留你原有的wrapper样式 */
.wrapper {
  max-width: 1200px; /* 你的原有宽度 */
  margin: 0 auto; /* 居中布局 */
  padding: 0 20px;
}

/* 右侧图片的样式 */
.right-floated-img {
  position: absolute;
  right: 0; /* 紧贴浏览器右侧 */
  top: 0; /* 垂直位置可根据需求调整，比如设为50%后transform: translateY(-50%)实现垂直居中 */
  max-height: 100vh; /* 限制图片高度不超出视口 */
  width: auto; /* 保持图片比例 */
}

方法二：CSS Grid 布局（更灵活的现代方案） #

通过网格布局将页面分为两个轨道，wrapper在左侧轨道内保持原有居中，图片占据右侧自适应轨道：

HTML 结构 #

<div class="page-container">
  <div class="wrapper">
    <p>这里是需要留在wrapper内的文本内容，保持原有布局...</p>
  </div>
  <img src="your-image-path.jpg" class="right-floated-img" alt="右侧展示图片">
</div>

CSS 样式 #

.page-container {
  display: grid;
  grid-template-columns: 1fr auto; /* 左侧轨道占满剩余空间，右侧轨道自适应图片宽度 */
  align-items: start; /* 垂直对齐方式，可改为center实现居中 */
  width: 100vw; /* 占满视口宽度 */
}

/* 保留原有wrapper样式 */
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  justify-self: center; /* 让wrapper在左侧轨道内居中 */
}

.right-floated-img {
  max-height: 100vh;
  width: auto;
}

注意事项 #

1. 如果图片宽度过大导致页面出现横向滚动条，可给图片添加 max-width: calc(100vw - var(--wrapper-total-width));（其中--wrapper-total-width是你的wrapper宽度+左右内边距的总和），避免超出视口。
2. 调整图片的top值或align-items属性，可以控制图片的垂直位置，比如实现垂直居中、与文本顶部对齐等效果。

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