如何使用HTML/CSS将文本包装在图像周围

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

我想设计一个文本块，如下图所示:

(https://docs.google.com/file/d/0B8gEuF9U3SaENzNsOTdxMmV3Ykk/edit?usp=sharing)

(https://docs.google.com/file/d/0B8gEuF9U3SaENzNsOTdxMmV3Ykk/edit?usp=sharing)

Question whether this is possible?

问这是否可能?

4 个解决方案

#1

you have to float your image container as follows:

你必须浮动你的形象容器如下:

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/

#2

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

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

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)

.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 article on CSS Shapes

此外，这里还有一篇关于CSS形状的文章

#3

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

除了BeNdErR的答案:“其他文本”元素应该有float:none, like:

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

http://jsfiddle.net/watz5fg8/3/

http://jsfiddle.net/watz5fg8/3/

#4

If the image size is variable or the design is responsive, in addition to wrapping the text, you can set a min width for the paragraph to 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;
}