html – 当一个div图像包装时,可以像包裹一样处理包裹？

概述我有一个充满图像的div： .species { background-color: lightblue; margin-top: 20px; display: inline-block;}.animals { display: inline; margin: 0; margin-right: 25px; margin-top: 5px;}.animal { 我有一个充满图像的div：

.specIEs {  background-color: lightblue;  margin-top: 20px;  display: inline-block;}.animals {  display: inline;  margin: 0;  margin-right: 25px;  margin-top: 5px;}.animal {  wIDth: 25px;  padding: 8px 2px 0 2px;  display: inline;}

<div >  <div >    <img  src="ant.png">    <img  src="ant.png">    <img  src="ant.png">    <img  src="ant.png">    <img  src="ant.png">    <img  src="ant.png">    <img  src="ant.png">    <!-- imagine about 30 more ants -->  </div></div>

由于我的内容限制为600px,包含蚂蚁的div(.animals)包裹起来,如下所示：

但我希望它像< span>一样包装,以最后一个ant结尾,就像这样(在照片编辑器中创建)：

但是,如果我给父母< div>内联显示或将其更改为跨度,父级不会扩展到图像的高度,所以我得到：

fiddle example

所以我的问题是：是否有可能在div和span之间获得两个世界中最好的东西,其中容器大小到图像的高度但是没有扩展到最后一行页面的宽度？

我已经尝试了各种CSS命令来包装文本和空格,但无济于事.

解决方法 将背景设置为img,而不需要第二个父div .animals

.specIEs {  wIDth: 600px;  /* as you mentioned in your question */  margin-top: 20px;   Font-size: 0  /* fix inline(-block) gap */}.animal {  wIDth: 25px;  padding: 8px 2px 0 2px;  background-color: lightblue;}

<div >  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <img  src="http://i.stack.imgur.com/h5bLb.png" />  <!-- imagine about 30 more ants --></div>

总结

以上是内存溢出为你收集整理的html – 当一个div图像包装时,可以像包裹一样处理包裹？全部内容，希望文章能够帮你解决html – 当一个div图像包装时,可以像包裹一样处理包裹？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。