如何实现图片右浮半幅超出文本区域 不可修改container类属性

该效果可实现，全程不需要增删container类的任何属性。

原有代码出现图片浮动到浏览器窗口边缘的问题，核心原因是浮动元素默认会停靠在最近的定位上下文边界，没有做定向偏移控制。

具体实现步骤：

• 给需要做效果的图片单独挂载自定义样式类，不要改动原有容器的任何属性
• 给自定义类添加如下样式：

.half-out-float-right {
  float: right;
  /* 按需求设置图片展示宽度，示例设为320px */
  width: 320px;
  /* 核心样式：负右外边距将图片向文本区域外侧拉动，拉动距离为图片宽度的1/2，刚好露出半幅 */
  margin-right: -160px;
  /* 边距兜底，避免图片和正文文字粘连 */
  margin-left: 1.2rem;
  margin-bottom: 1.2rem;
}

适配注意事项 #

• 如果做响应式适配，可将图片宽度设置为相对单位，比如width: 40%，对应负外边距设置为margin-right: -20%，即可在不同宽度下始终保持半幅超出文本区的效果
• 小屏幕视口下如果担心图片溢出屏幕，可加媒体查询，在屏幕宽度小于图片两倍宽度时，把负外边距设为0，让图片完全落在文本区域内，避免出现横向滚动条
• 如果需要图片和文本之间有更自然的绕排效果，可根据页面行高微调图片上下边距数值即可

实现逻辑本质是利用浮动元素支持负外边距偏移的原生特性，不需要改动父容器的任何属性，完全满足给定的限制条件。

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