包裹一侧

Question

如何围绕中心（圆形）图像包装文本，如下所示：

我尝试了这个jsfiddle，但是文字在图像后面并且没有在它周围流动。

＆＃13;

#circle {
	float:positioned;
	position: absolute;
	top:10%;
	left: 40%;
	wrap-shape: circle(50%, 50%, 120px);
	wrap-margin: 10px;
        }

＆＃13;

<div id="circle"><img src="http://www.guitare-rabuffetti.fr/test/circle.png"/></div>	

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.
Mauris vel lacus vitae felis vestibulum volutpat. Etiam est nunc, venenatis in, tristique eu, imperdiet ac, nisl. Cum sociis natoque penatibus et 
</div>

＆＃13;

Answer 1

如前所述，形状包装目前仅适用于float ed元素，因此仅使用CSS无法实现这种情况，因为只允许包装在形状的一侧（预期）。采用CSS Shapes 2和/或CSS Exclusions规范后，我们不仅可以使用形状，还可以使用图像透明度。

我在尝试弄清楚形状和CSS列如何相互作用时遇到了同样的问题（剧透：体面，但不是有机）。问题似乎是布局算法寻找最远的边缘（忽略多边的可能性），然后从该坐标开始内容布局。对于中间的元素，这意味着您只在一侧获得文本。对于CSS列（这是我如何计算出来的），布局再次从最远的边缘开始，然后继续直接向下而不是包裹到每条线上的形状（参见fiddle），因此形状上的突起（像一颗恒星polygon）实际上可以强制包裹内容最终落在整个形状之下，而不是挤压到一侧或向下流入突起。

（注意第二个例子中有3组2列）

但是，有几个选项可能适用于类似的情况。我已经从其他答案/评论中修改了以下内容，但是必须进行一些更改才能使它们正常工作（并且有几个CSS属性是实验性的并且不再有效），所以我觉得这是作为一个新的答案比编辑/评论更好：

包裹一侧

在shape-outside left ed div上使用float创建包装圈，然后使用margin-left将其从左侧推开。我在div中添加了一个圆圈用于说明（您的图片网址为404），但不得不调整位置，因为Chrome没有按照添加边距时的预期方式计算其位置。

http://jsfiddle.net/brichins/50h20kxa/1/

列和镜像包装元素

如果列可以接受，请手动（参见上面的CSS列讨论）为列创建2个容器并在每个列的侧面放置shape d元素，如下所示：

http://jsfiddle.net/brichins/gvhpfccu/

这里的缺点是你可能想要一个块的列（不一定对可读性不好），以及必须为你的内容计算适当的分割。

读

HTML5 Rocks上的简介和演练：https://www.html5rocks.com/en/tutorials/shapes/getting-started/
- 引用2013年令人惊叹的Alice in Wonderland示例。它似乎不再完全正常运作，但entire talk仍然很有趣
使用CSS形状创建非矩形布局：https://sarasoueidan.com/blog/css-shapes/
CSS技巧文章：https://css-tricks.com/almanac/properties/s/shape-outside/
D3plus变通办法插件（适用于类似的SVG解决方案）：https://d3plus.org/examples/utilities/a39f0c3fc52804ee859a/

Answer 2

问题已解决：

实际情况： CSS形状适用于float，因此现在不适用于居中图像。此属性目前仅适用于Chrome和Opera。也许未来会有非浮动元素的解决方案。看看这个W3C编辑的草稿：http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

手工制作的CSS解决方案：基本上，有两列（如报纸）。文本从左栏开始向下。文本继续在右列的顶部并向下。列比图像高一点。左列有一个半不可见的圆圈以及右列 - 位于居中图像的位置。两个半圆由不同长度的多个盒子构成，它们是不可见的。（方框的高度是字体的高度。）文本必须合理。现在，文本围绕每列的半圈流动。图像将位于2个不可见的半圆上。

另一个不是非常技术性的解决方案是使用Libre Office和Inkscape生成SVG文件。将图片导入Libre Office - 在图像周围包装文本 - 另存为PDF - 打开Inkscape - 另存为SVG - 在网页中导入SVG - 完成。

感谢大家帮助我和你的投入！

Answer 3

我认为它不可能，因为它依赖于float而你无法浮动到页面的中间/中心。

这是我想出的： [老小提琴] / 5Lxc444p / 8 /

如果您将width样式放在实际圈子上，则效果优于父div。

此外，这里有一篇关于css形状的好文章：http://www.html5rocks.com/en/tutorials/shapes/getting-started/

编辑：

这里是带有绝对定位圆的2列布局的更新小提琴。 http://jsfiddle.net/5Lxc444p/11/

CSS围绕居中图像环绕文本

3 个答案:

包裹一侧

列和镜像包装元素

读