html - div内动态添加图片

Question

我有一个下拉列表，它将在 div 内动态添加图像元素，其类名为 ，DrugNameCardid 为testDiv。通过下面的所有尝试，HTML 没有听 CSS。我在这里想念什么？

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

Answer 1

您正在反转 CSS 选择器。

  img > div.DrugNameCard

上面这行实际上意味着：所有作为元素的直接子级的divwithDrugNameCard类img，而实际上您需要的是相反的：

  div.DrugNameCard > img

Answer 2

我认为您已经将元素选择器倒退了。应该：

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