在两个文本块之间居中的图像的形状外部

Question

我想在两个文本块之间放置一个图像，并将所有这些图像居中。图片应具有shape-outside属性，以使文本以如下所示的圆形溢出：

位置：

• 红色块=文字
• 黑色圆圈=图片

我当前的代码使用flex来使整个内容居中，但事实证明shape-outside不能使用。

div{
  display:flex;
  flex-flow:row nowrap;
}
img{float:left;
shape-outside:circle(100px at 50%);
width:200px;height:200px;}
p{width:600px;}

<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
</p>
<img src="https://via.placeholder.com/200" >
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus enim ullam dolorum magnam deleniti quia quaerat vero aliquid fuga assumenda voluptatibus quis, quae molestias eligendi reiciendis quidem dignissimos, dolore, provident.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus enim ullam dolorum magnam deleniti quia quaerat vero aliquid fuga assumenda voluptatibus quis, quae molestias eligendi reiciendis quidem dignissimos, dolore, provident.Lorem ipsum dolor sit amet, consectetur adipisicing 
</p>
</div>

我怎么能做到？

Answer 1

shape-outside只能与float元素一起使用，但是当将容器设置为flex容器时，将不再考虑您设置的float属性。

您可以考虑在两个容器中每个容器中都有一个float元素，并使两个圆圈重叠以创建仅一个的错觉：

div.box {
  font-size: 0;
  max-width: 600px;
}

div.box p {
  width: 50%;
  display: inline-block;
  font-size: initial;
  vertical-align: top;
  text-align: justify;
}

div.box p:before {
  content: "";
  width: 75px; /*half the height*/
  height: 150px;
  margin-top: 30px; 
  background-image: url(https://picsum.photos/300/300?image=1069);
  background-size:150px 150px;
}

div.box p:first-child:before {
  float: right;
  shape-outside: circle(55% at right calc(50% + 15px));
  background-position:left;
  border-radius: 150px 0 0 150px;
}

div.box p:last-child:before {
  float: left;
  shape-outside: circle(55% at left calc(50% + 15px));
  background-position:right;
  border-radius: 0 150px 150px 0;
}

<div class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>

</div>

并使用CSS变量使形状更易于调整：

div.box {
  font-size: 0;
  max-width: 600px;
  --R:75px; /* radius */
}

div.box p {
  width: 50%;
  display: inline-block;
  font-size: initial;
  vertical-align: top;
  text-align: justify;
}

div.box p:before {
  content: "";
  width: var(--R);
  height: calc(2*var(--R));
  margin-top: 30px; 
  background-image: url(https://picsum.photos/300/300?image=1069);
  background-size:calc(2*var(--R)) calc(2*var(--R));
}

div.box p:first-child:before {
  float: right;
  shape-outside: circle(55% at right calc(50% + 15px));
  background-position:left;
  border-radius: calc(2*var(--R)) 0 0 calc(2*var(--R));
}

div.box p:last-child:before {
  float: left;
  shape-outside: circle(55% at left calc(50% + 15px));
  background-position:right;
  border-radius: 0 calc(2*var(--R)) calc(2*var(--R)) 0;
}

<div class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>

</div>

<div class="box" style="--R:20px;">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>

</div>

<div class="box" style="--R:100px;">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>

</div>