所以我的标题，我希望，几乎可以解释我想要做什么 - 在图像周围浮动文字很容易 - 我想要相反，如果我有一些文字和多个图像我希望图像漂浮在周围文本。
Google几乎只返回“图片周围的浮动文字”，所以我希望你们能帮忙。
E.G。假设我有这个HTML（请忽略内联样式）：
<div>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<p>Formula One, also known as Formula 1 or F1 and referred to officially as the FIA Formula One World Championship,[2] is the highest class of single-seater auto racing sanctioned by the Fédération Internationale de l'Automobile (FIA). The "formula", designated in the name, refers to a set of rules with which all participants' cars must comply.[3] The F1 season consists of a series of races, known as Grands Prix (from French, originally meaning great prizes), held throughout the world on purpose-built circuits and public roads. The results of each race are evaluated using a points system to determine two annual World Championships, one for the drivers and one for the constructors. The racing drivers, constructor teams, track officials, organisers, and circuits are required to be holders of valid Super Licences, the highest class of racing licence issued by the FIA.[4]</p>
<p>F1 cars are the fastest multi-turn circuit-racing cars in the world, owing to very high cornering speeds achieved through the generation of large amounts of aerodynamic downforce. Formula One cars race at speeds of up to 350 km/h (220 mph) with engines currently limited in performance to a maximum of 15,000 RPM. The cars are capable of lateral acceleration in excess of five g in corners. The performance of the cars is very dependent on electronics – although traction control and other driving aids have been banned since 2008 – and on aerodynamics, suspension and tyres. The formula has radically evolved and changed through the history of the sport.</p>
<p>While Europe is the sport's traditional base, and hosts about half of each year's races, the sport's scope has expanded significantly during recent years and an increasing number of Grands Prix are held on other continents. F1 had a total global television audience of 527 million people during the course of the 2010 season.[5]</p>
<p>Grand Prix racing began in 1906 and became the most popular type internationally in the second half of the twentieth century. The Formula One Group is the legal holder of the commercial rights.[6] With annual spending totalling billions of US dollars, Formula One's economic effect and creation of jobs is significant, and its financial and political battles are widely reported. Its high profile and popularity have created a major merchandising environment, which has resulted in great investments from sponsors and budgets in the hundreds of millions for the constructors. Since 2000 the sport's spiraling expenditures have forced several teams, including manufacturers' works teams, into bankruptcy. Others have been bought out by companies wanting to establish a presence within the sport, which strictly limits the number of participant teams.</p>
现在这个ALMOST实现了我想要的效果，直到图像数量意味着图像比文本“更长”。当图像比文本长时，我希望它们包裹在文本下面，例如
text text text text IMAGE
text text text text IMAGE
text text text text IMAGE
text text text text IMAGE
IMAGE IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE IMAGE
这可能吗？我需要只使用HTML和CSS来实现它。
对于我想要的每个页面，文本长度和图像数量可能不同。
感谢所有回复的人。
这是我的解决方案dev'd使用下面的答案 - 我没有得到我原本想要的，但我得到了一些符合我的目的。 请注意，这会将图像放在左侧 - 不像上面原先要求的那样 - 它看起来更左边。
HMTL：
<div id="maindata">
<div id="maintext">
<h2>Ferrari</h2>
<p>They are red.</p>
<P>I like them</p>
</div>
<img class="image" src="http://www.myimagehost.com/ferrari1.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari2.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari3.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari4.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari5.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari6.jpg" />
</div>
CSS：
#maindata {
float: left;
width: 100%;
}
#maindata #maintext{
margin-top: 15px;
float: right;
width: 63%;
padding: 10px;
}
#maindata .image{
max-width:28%;
margin-top: 15px;
padding: 10px;
}
解决方案的小提琴：http://jsfiddle.net/k0rsc5u7/
答案 0 :(得分：1)
我首先将文本'容器'浮动到左边，宽度小于页面宽度，这样你就可以留下空间让图像静止，然后只需添加图像。
一旦它们到达底部，它们应该在文本之后开始然后落到页面的左侧。
可能还有其他事情需要考虑，例如当您将图像放在文本右侧时，在您的示例中它们是一个在另一个上面，然后当它们落在左侧时，它们并排 - 您可能需要更多的html / css来对此进行排序。
答案 1 :(得分：0)
如果要在图像周围浮动文本，请将float应用于图像。
在这里，您希望在文本周围浮动图像，因此您应该将float应用于文本;）