如何实现左侧受容器限制、右侧贴合页面边缘的区块？

要实现这个效果，核心是让右侧图片脱离container的宽度约束，同时保证左侧内容仍受容器限制。可以通过调整HTML结构和CSS布局来实现，具体方案如下：

步骤1：调整HTML结构 #

把右侧的图片容器从container内部移出来，让它和container同级，成为main-screen的直接子元素。这样图片就能不受容器的padding和最大宽度限制。

修改后的HTML：

<section class="main-screen">
    <div class="container">
        <div class="main-screen-content">
            <div class="main-screen-title">
                <h1>
                    把尴尬的实验室检查换成居家<span class="blue-text-style">性病检测</span>和<span class="orange-text-style">治疗</span>。
                </h1>
                <div class="site-button main-screen-button">
                    <button class="text-button">
                        开始使用
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- 把图片容器移到container外面 -->
    <div class="main-screen-img">
        <img src="./img/main-screen-img.png" alt="居家性病检测">
    </div>
</section>

步骤2：修改CSS布局 #

对main-screen和main-screen-img添加样式，实现左侧内容居中受容器限制、右侧图片贴边的效果：

修改后的CSS：

.container {
  width: 100%;
  max-width: 1260px;
  padding-right: 30px;
  padding-left: 30px;
  margin-right: auto;
  margin-left: auto;
}

.main-screen {
  width: 100%;
  background: linear-gradient(180deg, #dedde2 0%, #e3e6ed 44.29%, #dde6ef 100%);
  /* 用Flex布局让左侧内容垂直居中 */
  display: flex;
  align-items: center;
  position: relative;
  /* 给图片留出空间，避免左侧内容被遮挡 */
  padding-right: clamp(200px, 30vw, 500px);
}

.main-screen-content {
  padding-top: 118px;
  padding-bottom: 118px; /* 添加上下内边距保证区块高度 */
}

.main-screen-img {
  /* 绝对定位让图片贴页面右侧 */
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(200px, 30vw, 500px); /* 控制图片容器宽度，适配不同屏幕 */
  height: 100%;
}

.main-screen-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片铺满容器，不变形 */
}

关键改动说明 #

• 结构调整：将图片容器移出container，避免容器的padding和最大宽度限制图片的位置
• 定位与布局结合：main-screen用Flex保证左侧内容垂直居中，图片容器用绝对定位固定在页面右侧，right:0让图片完全贴合右边缘
• 响应式适配：用clamp()函数设置图片容器宽度，在不同屏幕尺寸下自动调整，同时给main-screen添加padding-right，避免左侧内容被图片遮挡
• 图片适配：给图片设置object-fit: cover，保证图片铺满容器的同时保持比例，不会拉伸变形

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