移动端旋转图片后无法实现右浮动的CSS问题咨询

嘿，各位大佬，我碰到个CSS布局的小麻烦，想请教下：我有一张宽幅的横向图片，打算在移动端把它旋转90度变成纵向，同时让它右浮动在正文文本里。目前旋转效果能正常出来，但浮动就是不生效，文本根本不会围绕旋转后的图片排版。这事儿在CSS层面能搞定吗？如果实在不行，是不是只能先在Photoshop里把图片提前转好再用？

下面是我目前的代码：

HTML 代码 #

<div class="hole-story-container">
  <div class="story-headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</div>
  <img class="vertical-hole mobile " src="//newsinteractive.post-gazette.com/.test2/img/hole-1.png"/>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>

CSS 代码 #

.hole-story-container {
  width: 50%;
  margin-left: 25%;
}
@media only screen and (max-width: 800px) {
  .hole-story-container {
    max-width: 100%;
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
  }
}

.hole-story-container .story-headline {
  font-family: 'Montserrat';
  color: #838377;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 150%;
}
@media only screen and (max-width: 800px) {
  .hole-story-container .story-headline {
    font-size: 2rem;
    line-height: 120%;
  }
}

.hole-story-container p {
  font-family: 'Montserrat';
  color: #838377;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 150%;
}

.vertical-hole {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  float: right;
  padding: 20px;
}

问题原因分析 #

其实这是transform的特性导致的：当你给元素加了transform后，它会创建一个新的层叠上下文，同时元素的布局占位还是基于变换前的原始盒模型尺寸，文本排版的浮动计算只会认这个原始占位，不会跟着变换后的视觉位置走，所以看起来浮动就失效了。

解决方案 #

这里给你两个可行的方向：

方案1：用容器包裹图片，分离浮动和旋转逻辑

核心思路是：让一个空容器负责float: right来占据布局空间，然后在容器内部旋转图片，通过调整图片的位置让它刚好和容器的浮动位置对齐。

修改后的代码示例：

HTML 调整

<div class="hole-story-container">
  <div class="story-headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</div>
  <!-- 新增容器包裹图片 -->
  <div class="vertical-hole-container">
    <img class="vertical-hole mobile" src="//newsinteractive.post-gazette.com/.test2/img/hole-1.png"/>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>

CSS 调整

/* 容器负责浮动和占位 */
.vertical-hole-container {
  float: right;
  padding: 20px;
  /* 根据图片旋转后的宽高比设置容器的aspect-ratio，假设原图片是4:1宽高，旋转后变成1:4 */
  aspect-ratio: 1 / 4;
  /* 可选：如果需要限制最大宽度 */
  max-width: 200px;
}

.vertical-hole {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  /* 把旋转原点设为左上角，方便调整位置 */
  transform-origin: top left;
  /* 用translate调整图片位置，让它刚好填满容器的浮动占位 */
  /* 这里的100%是基于图片自身的宽度，你可能需要根据实际尺寸微调 */
  transform: rotate(90deg) translateY(100%);
  -webkit-transform: rotate(90deg) translateY(100%);
  /* 让图片占满容器的高度 */
  height: 100%;
  width: auto;
}

方案2：提前在PS中旋转图片（最省心的方案）

如果不想在CSS里折腾各种位置调整和兼容性问题，直接在Photoshop或其他图片工具里把图片提前旋转90度保存，然后直接用纵向的图片，这样float: right就能正常生效，完全不用加transform，兼容性和稳定性都拉满。

内容来源于stack exchange