Bootstrap和Image Wrap

Question

我没有这方面的代码但是在互联网上搜索我觉得我想做的事情是不可能的。 我想做的是围绕不是矩形的图像包装文本。 像这个JS JSWrap或Stackflow上的这个解决方案似乎不适用于响应式网站。 有没有人为我找到解决方案？ 感谢。

Answer 1

您可以使用CSS shape-outside属性来实现此结果。该属性适用于浮动元素，可以使用过渡进行动画处理。您可以使用图像的url（）值，或者您可以像我在此示例中那样设置背景图像。

您可以详细了解该属性here。

希望它有所帮助！

＆＃13;

＆＃13;

body {
  margin: 15px;
}

.top-shape {
  shape-outside: circle(50% at 10px 10px);
  float: left;
  clip-path: circle(50% at 0 0);
  width: 300px;
  height: 300px;
  background: url(https://journalismfrommars.files.wordpress.com/2015/01/mars-no-background.png?w=2880&h=1800) 50% 50% no-repeat;
}

.p1 {
  text-align: justify;
}

＆＃13;

<div class="main">
<div class="top-shape"></div>
<div class="btm-shape"></div>
<p class="p1">Rich in heavy atoms intelligent beings Apollonius of Perga. Shores of the cosmic ocean Orion's sword descended from astronomers courage of our questions, hundreds of thousands billions upon billions vanquish the impossible, preserve and cherish that pale blue dot colonies? Inconspicuous motes of rock and gas billions upon billions the carbon in our apple pies. Intelligent beings, emerged into consciousness billions upon billions at the edge of forever vanquish the impossible kindling the energy hidden in matter light years dream of the mind's eye vanquish the impossible rich in heavy atoms! Rich in heavy atoms intelligent beings Apollonius of Perga. Shores of the cosmic ocean Orion's sword descended from astronomers courage of our questions, hundreds of thousands billions upon billions 
</p>
</div>

＆＃13;

＆＃13;

＆＃13;