У меня есть следующий код:
function computeSetImgMargins(iD) {
var ids = iD;
var totalWidth = 0
var totalHeight = 0;
ids.children().each(function(index){
var imgWidth = ids.children().width();
var imgHeight = ids.children().height();
totalWidth += imgWidth;
totalHeight += imgHeight;
var leftMargin = imgWidth - totalWidth;
var topMargin = imgHeight - totalHeight;
ids.children(index).css('margin-left',leftMargin);
ids.children(index).css('margin-top',topMargin);
});
}
var objLi = jquery("li", this);
computeSetImgMargins(objLi);
Мой HTML имеет что-то вроде этого
<div id="imgrt">
<ul id="if">
<li><img src="../pictures/album/20-c-44.jpg" /></li>
<li><img src="../pictures/album/20-c-44.jpg" /></li>
</ul>
</div>
У меня нет отдельных идентификаторов или классов для каждого элемента. Я не уверен, что это было бы хорошей идеей (было бы открыто для комментариев), но без использования этого, как применить различные поля margin-left и margin-top для каждого элемента <li> и <img> в <ul>?
Это, я думаю, перекрывает оба изображения.
Мой CSS для <ul> выглядит следующим образом:
#if { left: 0%; top: 0%; margin: 5px; padding: 5px; position: relative; width: 400px; height: 400px; background-color: #101010; z-index: 30; }