在div中動態添加圖片

我有一個下拉列表，它將動態添加div類中的圖像元素，類名爲DrugNameCard，id爲testDiv。通過下面的所有嘗試，HTML不會偵聽CSS。我在這裏錯過了什麼？在div中動態添加圖片

CSS - 各種失敗嘗試

body { 
}.DrugNameCard 
{ 
    height:3.85in; 
    width: 2.625in; 
    border: 5px solid black; 
    padding-right:.25in; 
    padding-left:.25in; 
    padding-top:.25in; 

} 
img div.DrugNameCard 
{ 
    height:.64in; 
    width: .64in; 
    padding-left: .1in; 
} 


img > div.DrugNameCard 
{ 
    height:.64in; 
    width: .64in; 
    padding-left: .1in; 
} 
img > .DrugNameCard 
{ 
    height:.64in; 
    width: .64in; 
    padding-left: .1in; 
} 
img .DrugNameCard 
{ 
    height:.64in; 
    width: .64in; 
    padding-left: .1in; 
} 
img #testDiv 
{ 
    height:.64in; 
    width: .64in; 
    padding-left: .1in; 
}

HTML

<select name="DropDownList2" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;DropDownList2\&#39;,\&#39;\&#39;)&#39;, 0)" id="DropDownList2"> 
    <option selected="selected" value="-1">Select picture to add</option> 
    <option value="Images/bandAid.jpg">BandAid</option> 
    <option value="Images/Confusion.jpg">Confusion</option> 
    <option value="Images/sadFace.jpg">Depression</option> 
    <option value="Images/sleepiness.jpg">Sleepiness</option> 

</select> 
    <br /> 
    <div id="testDiv" class="DrugNameCard"> 

    <img src="Images/Confusion.jpg" /><img src="Images/sleepiness.jpg" /><img src="Images/sadFace.jpg" /></div> 
    <input type="submit" name="btnSubMitDrugName" value="Submit Drug Name" id="btnSubMitDrugName" />

來源

2013-06-12 wootscootinboogie

我會建議在jsfiddle或類似的例子。 –

@ Ek0nomik我正在使用C＃來做到這一點，我不認爲我可以展示什麼比我在這裏與小提琴更多。 – wootscootinboogie

我想你後退了元素選擇器。應該是：

.DrugNameCard img 
{ 
    height:.64in; 
    width: .64in; 
    padding-left: .1in; 
}

來源

2013-06-12 18:55:05 JDB

顯示我使用CSS的程度。格拉西亞斯！ – wootscootinboogie

@wootscootinboogie - 查看http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ – JDB

你扭轉了CSS選擇器。

img > div.DrugNameCard

上面一行實際上意味着：所有的div與DrugNameCard類是一個img元素的直接孩子，而實際上你需要的是相反的：

div.DrugNameCard > img

來源

2013-06-12 18:55:05 haim770

感謝您的小解釋，希望下次我會記住我的選擇器 – wootscootinboogie

在div中動態添加圖片

回答

相關問題