logo标签列表

当图片的div换行时，是否可以像处理span一样处理换行？

htmlcssimage
7

我有一个充满图片的 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>

由于我的内容宽度被限制在600像素，包含蚂蚁的 div (.animals) 会自动换行，如下所示：

enter image description here

但我希望它像 <span> 一样换行，以最后一个 ant 结尾，就像这样（在照片编辑器中创建）：

enter image description here

然而，如果我将父级<div>设置为内联显示或更改为span，父级就不会扩展到图像的height，因此我会得到这样的结果：

enter image description here

示例

所以我的问题是：是否可能在div和span之间获得最佳效果，其中容器大小与图像的height相同，但在最后一行不会扩展到页面的width？

我尝试了各种CSS命令来包装文本和空格，但都无济于事。

感谢大家提供的众多精彩答案！ - Chris Wilson
5个回答
2

将 background 设置为 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>

0

另一种方法是将第一个示例中的.species的margin-top: 20px;替换为padding-top:20px;。此外，不需要.animals div。

Please see below: 

#ex1 {
  display: inline;
}
.species {
  background-color: lightblue;
  padding-top: 20px; /*padding-top instead of margin-top*/
}
.animals {
  //border-bottom: 2px solid gray;
  display: inline;
  margin: 0;
  margin-right: 25px;
  margin-top: 5px;
}
.animal {
  width: 25px;
  padding: 8px 2px 0 2px;
  display: inline;
}
<div id="ex1" class="species">
  <!--<div class="animals">--> <!-- .animals is not needed-->
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
    <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <!--</div>-->
</div>

0
你应该选择第二个演示，因为容器div的展示 .species 是 inline-block。
并且将background-color: light blue; 设置到 img 标签而不是. species。 

.species {
    display: inline-block;
    margin-top: 20px;
    font-size: 0;
}

.animals {
    //border-bottom: 2px solid gray;
    display: inline;
    margin: 0;
    margin-right: 25px;
    margin-top: 5px;
}

.animal {
    width: 25px;
    padding: 8px 2px 0 2px;
    /* display: inline; whatever you like*/
    background-color: lightblue;
}
<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">
        <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">
        <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">
        <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>

0
.species {      
    margin-top: 20px;
}

.animals {
    display: table;
    margin: 0;
    margin-right: 25px;
}

 .animal {
    width: 25px;
    background-color: lightblue;  
    display: inline-block;
    vertical-align: top
}

代码片段 https://jsfiddle.net/zv3orszy/9/

0

从 .species 类中删除 background-color: lightblue; 并将其添加到图像 (.animal) 中。

.species {
/* background-color: lightblue; */
margin-top: 20px;
}


.animal {
    width: 25px;
    padding: 8px 2px 0 2px;
    display: inline;
    background-color: lightblue;
}

如果你喜欢使用内联元素，那么你应该在 #ex1 和 #ex2 即其父元素中添加 font-size:0; 来消除内联和内联块元素之间的间隙。你也可以调整图片的 padding 属性来使它们按照你的需要对齐，例如 padding: 8px 4px 2px 4px;

#ex2 {
display: inline-block;
font-size:0;
}


#ex1 {
  display: inline-block;
  font-size: 0;
}

#ex2 {
  display: inline-block;
  font-size:0;
}

.species {
    margin-top: 20px;
}

 .animals {
  //border-bottom: 2px solid gray;
  display: inline;
  margin: 0;
    margin-right: 25px;
  margin-top: 5px;
 }
  
  .animal {
  width: 25px;
  padding: 8px 4px 2px 4px;
  display: inline;
        background-color: lightblue;

 }
<div id="ex1" class="species">
    <div class="animals">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
 </div>
</div>

<div id="ex2" class="species">
    <div class="animals">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
  <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png">
 </div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接