如何在矩形div上环绕/浮动文本

Question

我正在尝试围绕div包裹或浮动一些段落。如果使用CMS，请使用flex命令对元素进行重新排序，以将灰色框向下移动（如果有任何不同）。我已经尝试了形状外，浮动div，删除P标签并使用SPANS，但是没有任何效果。我在.quote-wrapper元素和.quote-wrapper：before中添加了形状外CSS。它只是堆积。我也不认为JS是解决方案。这都是动态内容，因此不能在灰色框中添加固定高度。不过，最大宽度可能还可以。 P标签也会自动添加到段落中。

.column-quote-content-inner {
  display: flex;
  flex-direction: column;
  .quote-wrapper {
    order: 3;
    margin-left: -100px;
    width: 50%;
    height: auto;
    float: left;
    position: relative;
    p {
      margin: 0;
    }
  }
  p {
    float: left;
    display: inline-block;
    position: relative;
  }
  p:nth-of-type(1) {
    order: 1;
  }
  p:nth-of-type(2) {
    order: 2;
  }
  p:nth-of-type(3) {
    order: 4;
  }
  p:nth-of-type(4) {
    order: 5;
  }
}

<div class="column-quote-content-inner">
  <h3>Morbi Aenean Curabitur</h3>
  <div class="quote-wrapper">
    <p class="quote-content">"Donec leo massa, varius non rhoncus a, finibus sit amet odio."</p>
    <p class="quote-name">Aliquet Tristique</p>
  </div>
  <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id lorem sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras sed est id justo iaculis lobortis. Etiam tincidunt condimentum tellus.
    Phasellus sed lorem in magna condimentum blandit. Suspendisse eget ligula scelerisque, laoreet mi in, mattis lorem. Vestibulum aliquet sollicitudin eros vel faucibus. Mauris eu elit a sem fermentum posuere in ut turpis. Mauris vulputate, nisl nec
    fringilla blandit, lacus dolor facilisis enim, id viverra risus neque vel neque.</p>
  <p>2 Morbi eget urna nunc. Proin ac pharetra justo. Nunc in lacus hendrerit, dapibus orci id, sodales arcu. Aliquam fermentum risus eu justo convallis imperdiet. Morbi ut urna at augue hendrerit dictum. Aliquet Tristique In vulputate nunc non orci convallis
    facilisis. Curabitur in felis malesuada, volutpat felis quis, vestibulum ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <p>3 Integer accumsan neque et mollis eleifend. Fusce laoreet interdum magna, in pharetra diam. Donec leo massa, varius non rhoncus a, finibus sit amet odio. Morbi non dolor pulvinar, egestas tortor et, lacinia libero. Mauris nec luctus dui. Nulla facilisi.
    Duis sodales ante et nunc pulvinar facilisis. In neque lorem, pretium vitae est at, porta maximus dolor. Aenean aliquet enim non est tristique, in fermentum risus tempor.</p>
  <p>4 Morbi neque nibh, ornare sed auctor at, placerat in magna. Nunc at nulla eros. Sed tempus at eros at commodo. Donec a eleifend velit. Integer ut tincidunt massa. Aenean sed pulvinar dui, convallis facilisis purus. Nullam tortor risus, maximus nec
    tincidunt non, gravida ac neque.</p>
</div>

Answer 1

这是我的解决办法，

我正在使用shape-outside CSS属性来获得这种效果。

有关更多信息，请参阅此CSS Shapes

也请参考https://caniuse.com/#search=shape-outside以获得浏览器支持

*{
  box-sizing:border-box;
}

.parent {
  margin-left: 100px;
}

.parent span {
  shape-outside: content-box;
  margin-top: 200px; /*can be adjusted as per your design*/
  max-width:400px;
  float: left;
  shape-margin: 40px;
  margin-right: -68px;
  position: relative;
  left: -90px;
  background:grey;
  padding:25px;
}

<div class="parent">
  <span> "Donec leo massa,  varius non rhoncus a, finibus sit amet odio.""Donec leo massa,  varius non rhoncus a, finibus sit amet odio.""Donec leo massa,  varius non rhoncus a, finibus sit amet odio."</span>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos
    sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga
    laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero
    repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a
    aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione
    rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus
    sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos,
    earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita,
    facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae
    dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos
    sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga
    laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero
    repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a
    aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione
    rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus
    sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos,
    earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita,
    facere molestiae dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae
    dolor sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Esse dignissimos sapiente fuga laboriosam libero repudiandae a aliquam. Ratione rerum soluta voluptatibus sequi dignissimos, earum dicta expedita, facere molestiae dolor sunt.</p>
</div>

Answer 2

.quote-wrapper { 
  float:left; 
  margin-left:-200px; 
  margin-right:15px; 
  margin-bottom:15px; 
  padding:10px; 
  background-color:#ccc;
}
.column-quote-content-inner {
  margin-left:215px;
}

也许利润会有所帮助？