1
所以我的標題，我希望，非常解釋我正在嘗試做什麼 - 圍繞圖像浮動文本很容易 - 我想相反，如果我有一些文本，並且我希望圖像在文本週圍浮動多個圖像。HTML CSS圍繞文本漂浮圖像不圍繞圖像
谷歌幾乎只是返回「漂浮在圖像周圍的文字」，所以我希望你們可以幫忙。
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>
現在這種近乎達到我想要什麼，直到圖像的數字表示該圖像比文字「長」。當圖像長於文本時，我希望它們包裹在文本下面，例如
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/
JSfiddle請。我會說一些額外的HTML結構可能是最好的選擇。 –