我有一个充满图像的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 class="species">
<div class="animals">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<!-- imagine about 30 more ants -->
</div>
</div>
由于我的内容限制为600px,包含蚂蚁的div(.animals)包裹起来,如下所示：
但我希望它像< span>一样包装,以最后一个ant结尾,就像这样(在照片编辑器中创建)：
但是,如果我给父母< div>内联显示或将其更改为跨度,父级不会扩展到图像的高度,所以我得到：
所以我的问题是：是否有可能在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 class="species"> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" /> <!-- imagine about 30 more ants --> </div>
