html - 从两侧 html css 围绕图像/形状包装两列文本

Question

我正在尝试将文本环绕在从两侧使用的图像上像这样:

这是 html。

            <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <p>
                        There’s nothing like the feeling of driving a brand new luxury car or fully equipped SUV – especially if it’s free!  That’s right!  As part of B-Epic’s Compensation Plan, one of the awesome ways we reward our Brand Partners is with a car payment bonus of $500 per month.
                    </p> 
                    <p>
                        With our one-of-a-kind Car Bonus program, you only need to focus on one simple thing: Get 4 Brand Partners on the $89.95 package and then just teach them to do the same thing. Get 4, teach 4... it doesn't get any easier than that.
                    </p>
                    <p>
                        You earn the Car Bonus by purchasing a $89.95 pack or higher and sponsoring four Brand Partners at that same package level or higher who also sponsor four Brand Partners each at that package level or higher.  You are paid this bonus every month that you maintain the qualifications for it.

                    </p>
        </div>
                <img src="images\img3.jpg" class="element" alt="image">
                <div class="col-lg-4">
                    <p>What’s even better is that instead of requiring you to drive a specific make and model, you get to pick out any car (or truck, SUV, or even motorcycle) that you want…in the color of your choice!  Buy it or lease it – it’s completely up to you! 
                    </p>
                </div>
            </div>
        </div>

图片标签中使用的元素类的CSS

.element
   {
 shape-outside: circle(50%);
 width: 300px;
 height: 300px;
 float: left;

 }

请分享代码以获得如上图所示的效果。

Answer 1

这是一个基于 this previous answer 的想法我将在其中添加边距因子以控制文本和图像之间的空间:

div.box {
  border:1px solid red;
  margin:5px;
  font-size: 0;
  max-width: 600px;
  --R:100px; /* radius */
  --m:5px;   /* margin */
  --t:10px;  /* distance from top */
}

div.box p {
  width: 50%;
  margin:0;
  padding:0 var(--m);
  display: inline-block;
  vertical-align:top;
  font-size: initial;
  text-align: justify;
}

div.box p:before {
  content: "";
  width: var(--R);
  height: calc(2*var(--R));
  padding:var(--m) 0 var(--m) var(--m);
  margin-top:var(--t);
  background:var(--img) content-box;
  background-size:200% 100%;
  shape-outside: circle(var(--R) at var(--d,right) calc(-1*var(--m)) top calc(50% + var(--t)/2));
  float: right;
  border-radius: 500px 0 0 500px;
  margin-right:calc(-1*var(--m));
}

div.box p:last-child:before {
  float: left;
  padding:var(--m) var(--m) var(--m) 0;
  --d:left;
  background-position:right;
  border-radius:0 500px 500px 0;
  margin-left:calc(-1*var(--m));
  margin-right:0;
}

*,*::before,*::after {
  box-sizing:border-box;
}

<div class="box" style="--img:url(https://i.picsum.photos/id/1011/400/400.jpg)">
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>
</div>
<div class="box" style="--img:url(https://i.picsum.photos/id/248/400/400.jpg);--R:80px;--m:10px;--t:30px;">
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>

</div>
<div class="box" style="--img:url(https://i.picsum.photos/id/1074/400/400.jpg);--R:150px;--m:2px;--t:30px;">
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure,  illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure,  illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>

</div>

如果你想要相反的效果相关问题(圆圈内的文字):How can I ensure that text is inside rounded div?