如何使用HTML / CSS将图片包裹在图片周围

我想要devise一个如下图所示的文本块：

（ 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; } 

小提琴

http://jsfiddle.net/kYDgL/

Answer 2

使用CSS形状，你可以进一步，只是浮动文字周围的矩形图像。

实际上，您可以将文本包裹起来，以便将其包裹在图像或多边形的边缘的形状中。

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> 

Answer 3

除了BeNdErR的回答：
“other TEXT”元素应该有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

如果图像大小是可变的或者devise是响应式的 ，除了包装文本之外，还可以为段落设置最小宽度以避免它变得太窄。
给一个不可见的CSS伪元素与所需的最小段宽。 如果没有足够的空间来容纳这个伪元素，那么它将被压在图像的下面，并把它放在一个段落中。

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