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

Question

我有一个棘手的响应式 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

有人知道这方面的技术吗？我似乎想不通。谢谢

Answer 1

你可以使用 display:flex 和 order :

在断点处，它将来自您的 HTML 片段:

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

---

Javascript 和 float 清除也有帮助: 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>

---

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