从两边的HTML / CSS将两列文字围绕图像/形状包装 [英] wrapping two columns of text around an image/shape from both sides html css

问题描述

我正在尝试将文本包装在从两侧使用的图像周围，如下所示： ：

这是html。

 < div class = container> 
< div class = row> 
< div class = col-lg-4> 
< p> 
就像驾驶一辆全新的豪华车或设备齐全的SUV一样，尤其是免费的感觉！那就对了！作为B-Epic补偿计划的一部分，我们奖励品牌合作伙伴的一种很棒的方法是每月支付500美元的汽车付款奖金。 
< / p> 
< p> 
使用我们的独一无二的汽车红利计划，您只需要关注一件简单的事情：在89.95美元的套餐中获得4个品牌合作伙伴，然后教他们做同样的事情。得到4，教4 ...没有比这更容易的了。 
< / p> 
< p> 
您可以通过购买$ 89.95或更高价格的礼包并赞助同一级别或更高级别的四个品牌合作伙伴，同时又赞助同一级别或更高级别的四个品牌合作伙伴来获得汽车奖励。您每月都会获得此奖金，只要您保持该奖金的资格。 
 
< / p> 
< / div> 
< img src = images\img3.jpg class = element alt = image> 
< div class = col-lg-4> 
< p>更好的是，您无需选择任何特定的品牌和型号，而可以选择想要的任何汽车（或卡车，SUV甚至摩托车）……你的选择！购买或租借–完全取决于您！ 
< / p> 
< / div> 
< / div> 
< / div> 
  

图像标签中使用的 element 类的CSS

  .element 
 {
 shape-outside：circle（50％）; 
宽度：300像素； 
高度：300像素； 
浮动：左； 
 
} 
  

请共享代码，使其具有与

解决方案

以下是基于

是否需要相反的效果（圆圈内的文本）的相关问题：如何确保文本在圆角div内？

I'm trying to wrap the text round the image used from both side like this:

here is the 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 for element class used in image tag

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

 }

Please share the code to have the effect like the one in the image above.

解决方案

Here is an idea based on this previous answer where I will add the margin factor to control the space between text and image:

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>

Related question if you want the opposite effect (text inside the circle): How can I ensure that text is inside rounded div?

这篇关于从两边的HTML / CSS将两列文字围绕图像/形状包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！