Question

我需要围绕圆形div进行文本流动。我知道我可以使用shape-outside：circle（）;.但不幸的是，它在旧浏览器中不起作用。有没有人知道在css中执行此操作的另一种方法？这是一个wordpress网站。

＆＃13;

.logo-eye {
  background: #fff;
  border-radius: 50%;
  float: left;
  height: 439px;
  margin-right: 60px;
  width: 439px;
}

＆＃13;

<div class="logo-eye"></div>
<h1>Visie</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id orci porta lorem sagittis iaculis tincidunt at dui.</p>

＆＃13;

Answer 1

shape-outside

注意： - Chrome中只有supported

＆＃13;

img {
  display: block;
  float: left;
  border-radius: 50%;
  margin: 10px;
  shape-outside: margin-box;
}

＆＃13;

<div>
  <img src="http://placehold.it/150x150&text=img" alt="image" />
  <div>
    <h2>Shape-outside</h2>
    Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus
    et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
  </div>
</div>

＆＃13;

围绕圆形div包装文本

1 个答案: