如何使用HTML / CSS在图像上包装文本

Question

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

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

质疑这是否可行？

Answer 1

您必须float您的图片容器，如下所示：

<强> HTML

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

<强> CSS

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

<强> FIDDLE

http://jsfiddle.net/kYDgL/

Answer 2

使用CSS Shapes，您可以更进一步，只需在矩形图像周围浮动文字。

您实际上可以将文本换行，使其包含图像边缘的形状或包围它的多边形。

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>

此外，这里有一个关于CSS Shapes的好list apart article

Answer 3

除了 BeNdErR 的回答：
其他文字＆＃34;元素应该有float:none，如：

<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/

Answer 4

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

/*[local-name()="Trial1Response" and namespace-uri()="http://schemas.microsoft.com/Sql/2008/05/Procedures/dbo"]/*[local-name()="Trial1Result" and namespace-uri()="http://schemas.microsoft.com/Sql/2008/05/Procedures/dbo"]/*[local-name()="DataSet" and namespace-uri()="http://schemas.datacontract.org/2004/07/System.Data"]/*[local-name()="diffgram" and namespace-uri()="urn:schemas-microsoft-com:xml-diffgram-v1"]/*[local-name()="NewDataSet" and namespace-uri()=""]