Динамическое добавление изображений внутри div

У меня есть раскрывающийся список, который будет динамически добавлять элементы изображения внутри div с именем класса DrugNameCard и идентификатором testDiv. При всех попытках ниже, HTML не слушает CSS. Что мне здесь не хватает?Динамическое добавление изображений внутри div

CSS - различные попытки

Failed

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. Gracias! – 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

ответ

Смежные вопросы