Question

我想在图像周围包裹椭圆形文本，但文本在图像上保持重叠。我试图改变包裹元素的border-radius，width和height属性等（即图像），但它不起作用。下面是我的html和css代码：

HTML

<div id="circular-shape">
<img src="blackberries-basket.jpg" class="curve">
<p>/*...text to wrap around circle side...*/ 
</p> 
</div>

CSS：

#circular-shape { 
  font-family: Open Sans, sans-serif; 
  margin: 2rem; 
}
#circular-shape p { 
  line-height: 1.8; 
}

#circular-shape .curve { 
  width: 33%;
  height: 33%;
  min-width: 250px;
  float: left;
  border-radius: 50%;
  -webkit-shape-outside:circle();
  shape-outside:circle();
}

如何阻止文本触摸/重叠左侧的图像。请帮助。

Answer 1

只需添加保证金：

＆＃13;

img {
  float: left;
  margin: .5em;
  border-radius: 50%;
  -webkit-shape-outside: circle(50%);
  shape-outside: circle(50%);
}

＆＃13;

<div class="wrap">
  <img src="http://www.fillmurray.com/g/100/100" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsam harum enim omnis, iure laboriosam perferendis neque minima aspernatur culpa recusandae sunt quae minus, est quo ipsum ipsa laborum aperiam itaque facere sequi similique dignissimos
    repellendus excepturi! Doloribus, voluptate! Voluptatibus facere nisi nesciunt aliquid maxime vitae soluta earum sint quis distinctio, molestias quod dicta deleniti debitis accusantium at fugiat illum voluptatum dignissimos dolore temporibus obcaecati
    sunt non. Amet, et? Consequatur iusto nihil blanditiis amet placeat deleniti perspiciatis odit esse officia, dolor molestiae illum quo maiores quia nam delectus ut libero temporibus eveniet aperiam, nemo cupiditate, similique porro reprehenderit.
    Molestiae, perspiciatis!</p>
</div>

＆＃13;

Answer 2

将此添加到您的CSS

p {
  position: relative;
  left: 35px;
}

如果您愿意，请增加像素。

以曲线形状包裹文本围绕图像

2 个答案: