围绕图像问题浮动文本

Question

我有一些文字我希望环绕图像 - 我知道我需要将图像浮动到左边以强制文本环绕它。无论我做什么似乎都不起作用？

我在这里设置了一个codepen：https://codepen.io/emilychews/pen/GmdZOb

以下代码供快速参考。

* {
  padding: 0;
  margin: 0;
}

.outer {
  width: 50%;
  height: 50vh;
  background: blue;
}

.inner {
  display: block;
  width: 25%;
  height: 25vh;
  background: red;
  float: left;
  margin-right: 10px;
}

p {
  color: white;
}

<div class="outer">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p>
  <div class="inner">IMAGE</div>
</div>

Answer 1

您需要将图像放在文本之前，以便文本可以沿着它浮动。

＆＃13;

＆＃13;

&ov.Offset

＆＃13;

* {
  padding: 0;
  margin: 0;
}

.outer {
  width: 50%;
  height: 50vh;
  background: blue;
}

.inner {
  display: block;
  width: 25%;
  height: 25vh;
  background: red;
  float: left;
  margin-right: 10px;
}

p {
  color: white;
}

＆＃13;

＆＃13;

＆＃13;