HTML CSS 在文本周围 float 图像而不是在图像周围 float 文本

Question

所以我希望我的标题能很好地解释我想做的事情 - 在图像周围 float 文本很容易 - 我想要相反的东西，如果我有一些文本和多个图像，我希望图像在图像周围 float 文本。

Google 几乎只返回“图像周围的 float 文本”，所以我希望你们能提供帮助。

例如假设我有这个 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 来实现它。

对于我要执行此操作的每个页面，文本长度和图像数量可能不同。

感谢所有回复的人。

这是我使用下面的友善答案开发的解决方案 - 我没有得到我最初想要的东西，但我得到了满足我目的的东西。 请注意，这会将图像放在左侧 - 不是上面最初要求的右侧 - 它在左侧看起来更整洁。

HTML:

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

fiddle 解决方案:http://jsfiddle.net/k0rsc5u7/

Answer 1

我首先将文本“容器” float 到左侧，宽度小于页面宽度，这样您就有空间放置图像，然后添加图像。

它们应该在文本之后开始，然后在到达底部后落到页面左侧。

可能还有其他事情需要考虑，例如当您的图像位于文本的右侧时，在您的示例中它们是一个在另一个之上，然后当它们落在左侧时，它们并排 -您可能需要更多的 html/css 来对此进行排序。