如何使用 HTML/CSS 在图像周围环绕文本

How to wrap text around an image using HTML/CSS

提问by user1780343

I want to design a block of text like the following picture:

我想设计一个像下图这样的文本块：

Question whether this is possible?

问这是否可能？

回答by BeNdErR

you have to floatyour image container as follows:

您必须float按如下方式添加图像容器：

HTML

HTML

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>

CSS

CSS

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

FIDDLE

小提琴

http://jsfiddle.net/kYDgL/

http://jsfiddle.net/kYDgL/

回答by Danield

With CSS Shapesyou can go one step further than just float text around a rectangular image.

使用CSS Shapes，您可以更进一步，而不仅仅是在矩形图像周围浮动文本。

You can actually wrap text such that it takes the shape of the edge of the image or polygon that you are wrapping it around.

实际上，您可以对文本进行换行，使其具有您所环绕的图像或多边形边缘的形状。

DEMO FIDDLE(Currently working on webkit - caniuse)

DEMO FIDDLE（目前正在开发 webkit -caniuse）

.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}

<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Also, here is a good list apart articleon CSS Shapes

另外，这里有一篇关于 CSS Shapes的好文章

回答by T.Todua

Addition to BeNdErR's answer:
The "other TEXT" element should have float:none, like:

除了BeNdErR的回答：
“other TEXT”元素应该有float:none，比如：

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>

回答by Jithin B

If the image size is variableor the design is responsive, in addition to wrapping the text, you can set a min width for the paragraphto avoid it to become too narrow.
Give an invisible CSS pseudo-element with the desired minimum paragraph width. If there isn't enough space to fit this pseudo-element, then it will be pushed down underneath the image, taking the paragraph with it.

如果图片大小可变或设计是响应式的，除了包裹文本外，您还可以为段落设置一个最小宽度，以避免它变得太窄。
给出一个具有所需最小段落宽度的不可见 CSS 伪元素。如果没有足够的空间来容纳这个伪元素，那么它将被推到图像下方，并带走段落。

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}