Css - 在图像周围环绕文本，然后在断点处重新定位答案

【问题标题】：Css - Wrap text around image then reposition at break pointCss - 在图像周围环绕文本，然后在断点处重新定位
【发布时间】：2014-04-15 08:43:08
【问题描述】：

我有一个棘手的响应式 CSS 问题。

我正在创建左侧有正文，右侧有图像的文章。文字环绕图像。然后在断点上，我需要将正文副本放在图像上方。

当我使用此代码时：

<section class="news-article-body">
    <img src="img/news-article-image.jpg" alt="" title=""/>
    <p> 
      Lorem Ipsum...
    </p>
</section

CSS：

.news-article-body img {
    float: right;
}

看起来很棒。图像向右浮动，文本在需要时环绕。但是因为图像标签在副本之前我无法在断点处获得副本下方的图像。

所以基本上我需要用这个 html 包装文本（或其他解决方案）：

<section class="news-article-body">
    <p> 
      Lorem Ipsum...
    </p>
    <img src="img/news-article-image.jpg" alt="" title=""/>
</section

有人知道这方面的技术吗？我似乎无法弄清楚。谢谢

【问题讨论】：

标签： html css text

【解决方案1】：

你可以使用 display:flex 和 order ：

在断点处，它将来自您的 HTML：

.news-article-body {
display:flex;
flex-direction:column;
}
.news-article-body img {
order:2;
}

Javascript 和浮点数清除也有帮助：DEMO 或 DEMO

代码示例：

onload=function() {
  document.getElementById('myImg').style.position='absolute';// take img out of the flow
  var myoffsetHeight = document.getElementById('myP').offsetHeight;//return height of <p>
  document.getElementById('myT').style.height=myoffsetHeight +'px'; //set height to floatting element
  document.getElementById('myImg').style.position='static';//bring img back in the flow
}

来自这样的结构：

<section >
  <b id="myT"></b>
  <img src="http://lorempixel.com/250/100/" id="myImg"/>
<p id="myP">Pellentesque ....</p>
</section>

在这两个例子中，不要忘记设置你的断点

【讨论】：

很好的解决方案。但我需要它为 IE9 及更高版本工作，我认为不支持 flex 或 order
有已知高度吗？
每次都会有不同数量的文本。虽然可能有多个

标签
好的，想法是，codepen.io/anon/pen/ecKlk，然后您可能需要使用 javascript 来检索段落的高度并将其应用于浮动伪元素，图像将从中清除
@DustinSilk flex + javaScript 作为后备：codepen.io/anon/pen/ecKlk/?editors=111

【解决方案2】：

只需在文章文本的开头插入一个<img> 标签，然后使用align="right" 让文本环绕它。

【讨论】：

已经使用浮点数进行包装。然后，在响应断点处，我需要将文本定位在图像上方。这就是问题
您对使用 jQuery 感到满意吗？
我希望有一个纯 CSS 解决方案。 Gcyrillus（下）有一个很好的解决方案，但 IE9 不支持它，有几种方法可以使用 javascipt 来解决它。我将使用他对这篇文章的引用：codepen.io/anon/pen/ecKlk。完美运行。在 jQuery 上使用更多的 css 并且不重新排列 DOM。