1. 首页
  2. 问答
  3. 当一个div的图像包装，可能像对待跨度的包装？

当一个div的图像包装，可能像对待跨度的包装？

2016-06-13 65 views
7

我有一个完整的图像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，含有蚂蚁股利（.animals）包装，像这样：

enter image description here

但我希望它包装像一个<span>，结束于最后蚂蚁，像这样（在照片编辑器创建）：

enter image description here

但是，如果我给父<div>内嵌显示或将其更改为span，父不扩展到图像的height ，所以我得到这样的：

enter image description here

fiddle example

所以我的问题：是否有可能得到这两个最好的世界在div s和span s之间，其中容器大小为图像的height，但没有扩展到最后一行页面的width？

我试过各种CSS命令来包装文本和空白，无济于事。

来源

2016-06-13 Chris Wilson

+0

感谢很多伟大的答案，大家好！ –

回答

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>

来源

2016-06-13 18:01:00 dippas

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/

来源

2016-06-13 18:09:05 Roysh

+0

将'display：table'与'float'混合不是一个好主意 – dippas

+0

已编辑。 谢谢！ – Roysh

0

从.species类中删除background-color: lightblue;一个d将其添加到图像（.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;以除去 内联和内联块元件之间的间隙。您也可以通过更换margin-top: 20px;到padding-top:20px;为.species调整图像的填充，让他们正确对齐根据您need.may是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; 
 
} 
 

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

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

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

来源

2016-06-13 18:15:02 Pushpendra

0

其他的方式来做到这一点在你的第一个例子中。也不需要.animals div。

请参阅以下内容： 

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

来源

2016-06-13 18:15:52

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>

来源

2016-06-13 18:57:01 GeekPlux

相关问题

 相关问题