在两个文本块之间居中的图像的形状外部 [英] shape-outside of an image centered between two text blocks

问题描述

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

< a href = https://i.stack.imgur.com/8YqTW.png rel = nofollow noreferrer>

其中：

• 红色块=文本


• 黑色圆圈=图片

我当前的代码使用 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，方便地进行精英训练。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆Sed，placeat.Lorem ipsum dolor坐在，安全奉献精英。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆< / p>< img src = https://via.placeholder.com/200< p>" p>" p> Lorem ipsum dolor sit amet，consecturtur adipisicing elit。 Repellendus enim ullam dolorum magnam deleniti quia quaerat vero aliquid烟熏假设，molestias eligendi reiciendis quidem dignissimos，dolore，Provident.Lorem ipsum dolor sit amet，consecturtur adipisicilating elit。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆Sed，placeat.Lorem ipsum dolor坐在，安全奉献精英。 Repellendus enim ullam dolorum magnam deleniti quia quaerat vero aliquid烟熏承担，quaestisti eligendi reiciendis quidem dignissimos，dolore，Provident.Lorem ipsum dolor sitmetp，& > 

我该如何实现？

解决方案

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

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

  div.box {font-size：0;最大宽度：600像素；} div.box p {宽度：50％;显示：inline-block;字体大小：初始；垂直对齐：顶部； text-align：justify;} div.box p：before {content：;宽度：75像素； / *高度的一半* /高度：150px；边距顶部：30像素;背景图片：url（https://picsum.photos/300/300?image=1069）; background-size：150px 150px;} div.box p：first-child：before {float：right;形状外：圆形（右侧calc的55％（50％+ 15px））；背景位置：左； border-radius：150px 0 0 150px;} div.box p：last-child：before {float：left;形状外：圆形（左侧calc的55％（50％+ 15px））;背景位置：正确； border-radius：0 150px 150px 0;}  

 < div class = box> < p> Lorem ipsum dolor坐下，一直保持着高贵的状态。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆Sed，placeat.Lorem ipsum dolor坐在，安全奉献精英。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆塞德，胎盘素。 < / p> < p> Lorem ipsum dolor坐下，一直保持着高贵的状态。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆Sed，placeat.Lorem ipsum dolor坐在，安全奉献精英。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆塞德，胎盘素。 < / p>< / div>  

并带有CSS变量以使形状更易于调整：

  div.box {font-大小：0；最大宽度：600像素； --R：75px; / *半径* /} div.box p {宽度：50％；显示：inline-block;字体大小：初始；垂直对齐：顶部； text-align：justify;} div.box p：before {content：;宽度：var（-R）;高度：calc（2 * var（-R））;边距顶部：30像素;背景图片：url（https://picsum.photos/300/300?image=1069）;背景尺寸：calc（2 * var（-R））calc（2 * var（-R））;} div.box p：first-child：before {float：right;形状外：圆形（右侧calc的55％（50％+ 15px））；背景位置：左； border-radius：calc（2 * var（-R））0 0 calc（2 * var（-R））;} div.box p：last-child：before {float：left;形状外：圆形（左侧calc的55％（50％+ 15px））;背景位置：正确； border-radius：0 calc（2 * var（-R））calc（2 * var（-R））0;}  

 < div class = box> < p> Lorem ipsum dolor坐下，一直保持着高贵的状态。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆Sed，placeat.Lorem ipsum dolor坐在，安全奉献精英。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆塞德，胎盘素。 < / p> < p> Lorem ipsum dolor坐下，一直保持着高贵的状态。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆Sed，placeat.Lorem ipsum dolor坐在，安全奉献精英。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆塞德，胎盘素。 < / p>< / div>< div class = box style =-R：20px;> < p> Lorem ipsum dolor坐下，一直保持着高贵的状态。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆Sed，placeat.Lorem ipsum dolor坐在，安全奉献精英。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆塞德，胎盘素。 < / p> < p> Lorem ipsum dolor坐下，一直保持着高贵的状态。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆Sed，placeat.Lorem ipsum dolor坐在，安全奉献精英。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆塞德，胎盘素。 < / p>< / div>< div class = box style =-R：100px;> < p> Lorem ipsum dolor坐下，一直保持着高贵的状态。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆Sed，placeat.Lorem ipsum dolor坐在，安全奉献精英。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆塞德，胎盘素。 < / p> < p> Lorem ipsum dolor坐下，一直保持着高贵的状态。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆Sed，placeat.Lorem ipsum dolor坐在，安全奉献精英。前智者阿斯珀尔纳特，伊利姆·埃斯·韦利亚姆·埃利根迪，多洛·德·波利特·比尔·杜比·奎登姆塞德，胎盘素。 < / p>< / div>  

I'd like to have an image between two blocks of text, and have all of this centered. The image should have shape-outside property allowing the text to overflow it in a circular shape like this:

Where:

• red block = text
• black circle = image

My current code uses flex to center the entire thing, but it turns out shape-outside doesn't work with.

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>

How could I achive that?

解决方案

shape-outside can only be used with float element but when making the container a flex one the float property you set will no more be considered.

You can consider two container where you will have a float element in each one and you make both circle overlap to create the illusion of only one:

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>

And with CSS variable to make the shape easier to adjust:

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>

这篇关于在两个文本块之间居中的图像的形状外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！