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 {
  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>内联显示或将其更改为跨度,父级不会扩展到图像的高度,所以我得到：

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

原文地址：https://www.jb51.cc/html/225520.html