CSS wrap text around centred image

前端 未结 3 1833
春和景丽
春和景丽 2020-12-19 06:09

How to wrap a text around a centered (round) image like this:

\"http://i.stack.imgur.com/kgyCm.jpg\"

I

3条回答
  •  旧时难觅i
    2020-12-19 06:24

    Question resolved :

    Actual situation : The CSS shape works for float, so it's not for centered images now. This property works only for Chrome and Opera at the moment. Maybe there will be a solution for non float elements in the future. Look at this W3C editor's draft : http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

    A hand made CSS solution : Basically, there are 2 columns (like in newspapers). The text begins in the left column and goes down. The text continues on the top of the right column and goes down. The columns are a bit higher than the image. The left column has a half invisible circle as well as the right column - on the position of the centered image. The two half circles are build by multiple boxes of different length, they are invisible. (The hight of the boxes is the height of the font.) The text must be justified. The text is now flowing around the half circles in each column. The image will be positioned over the 2 invisible half circles.

    Another, not very technical solution is to use Libre Office and Inkscape to produce an SVG file. Import the picture into Libre Office - wrap the text around the image - save as PDF - open Inkscape - save as SVG - import the SVG in your Webpage - done.

    Thanks everybody for helping me and for your inputs !

提交回复
热议问题