Question

在我的网站上，我有一个这样的页面：

＆＃13;

<div style="float:left; width: 75%;  padding:15px 0px 0px 0px;">
    <h1>HEADING</h1>
    <h3>TEXT TEXT TEXT</h3>
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p> 
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
    </div>
    <img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;>

＆＃13;

正如您所看到的那样，我已经尝试将我的图片向右移动，而我的文字仍然存在，因为所有其他建议的问题都提示了，但这似乎并没有让它环绕。此外，我想让它在移动设备上显示如下：

HEADING
TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT
etc...
IMAGE

我还能做些什么来实现这个目标？

注意：我知道你们有多讨厌内联css lmao。只是我在这种情况下必须这样做。很难解释。：/

编辑：我使用了答案中提供的代码：

<div style="width: 75%;padding:15px 0px 0px 0px;">
<h1>HEADING</h1>
<h3>TEXT TEXT TEXT</h3>
<img src="http://dummyimage.com/300x300/000/fff" style="float:right;    width:25%; min-width:200px;" />
 <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
 </p>
 <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
 </p>
 <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
 </p>
</div>

这在PC视图上工作正常，但在移动设备上查看它是一个完全不同的故事...文本根本不包围图像...我该如何解决？

Answer 1

将图像放在要包装文本的最顶部位置。

它也应该在它的容器中

另请注意，" />

中缺少img

您还没有正确结束<p>代码</p>

＆＃13;

<div style="width: 75%;padding:15px 0px 0px 0px;">
  <h1>HEADING</h1>
  <h3>TEXT TEXT TEXT</h3>
  <img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;" />
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
</div>

＆＃13;

根据要求更新

以下是您将图片放在文字底部的方法，即使它在移动设备中位于顶部

＆＃13;

div {
  width: 75%;
  padding: 15px 0px 0px 0px;
  display: table;
}
img {
  width: 25%;
  min-width: 200px;
  display: table-footer-group;
}
p,
h1,
h3 {
  display: table-caption;
}

＆＃13;

<div>
  <h1>HEADING</h1>
  <h3>TEXT TEXT TEXT</h3>
  <img src="http://dummyimage.com/300x300/000/fff" />
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
  <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
  </p>
</div>

＆＃13;

Answer 2

首先放置您的图片，然后在图片代码中混淆括号<img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;" />。

Get Time  epoch

如何让我的文字环绕我的图像？

2 个答案: