1. 首頁
  2. 問答
  3. 當一個div的圖像包裝，可能像對待跨度的包裝？

當一個div的圖像包裝，可能像對待跨度的包裝？

2016-06-13 129 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

相關問題

 相關問題