Ширина элемента по соседнему без использования ID
Есть div по ширине окна.
В него добавляются динамически через jquery элементы. Сколько будет этих элементов и какой они будут ширины, неизвестно. Надо добавить последний div, заполнивший собой остаток до правого края родительского, изменяющийся при изменении размера окна. Дело осложняется тем, что родительских div'ов может быть несколько. При создании я имею jquery'евские объекты, которые и выкладываются. Задавать объектам ID нереально, это надо громоздить целую систему именования. Наверняка как-то можно задать css таким образом, чтобы width у последнего div'а был динамическим, но вот как? Использоваться будет только под IE, DOCTYPE //W3C//DTD HTML 4.01//EN, так что можно использовать expression, но как их задать в jquery? |
А причем тут ID вообще?
Используй либо таблицу (можно просто css display:table-cell) либо когда добавляешь элемент, пересчитывай ширину заполнителя и обновляй ее. |
var parent = $('div')//это твой родительский див var child = div.children('div');//это дивы внутри var childW; child.each.function(){ childW = childW +$(this).width();//ширина всех child } var newDiv=$('<div>,{id:'cap'}').css({width:parent.width()-childW}); paren.append(newDiv); Это при вставке последнего дива при ресайзе окна, вычислять ширину всех дивов кроме него, и изменять его ширину соответственно |
Цитата:
|
Цитата:
|
Есть вариант проще. Если они все добавляются в строку, то задавать им float:left, а последний оставить без ширины и float - он сам растянется как надо.
<div> <div style="height:100px; background:#aaf; float:left; width:200px;"></div> <div style="height:100px; background:#faa; float:left; width:50px;"></div> <div style="height:100px; background:#afa; float:left; width:100px;"></div> <div style="height:100px; background:#000"></div> </div> |
Aetae,
так он же растянется на всю ширину страницы? |
рони, 0_о? На всю ширину контейнера же...
<div style="width:70%;"> <div style="height:100px; background:#aaf; float:left; width:200px;">1</div> <div style="height:100px; background:#faa; float:left; width:50px;">2</div> <div style="height:100px; background:#afa; float:left; width:100px;">3</div> <div style="height:100px; background:#aaa">4</div> </div> |
Aetae,
ну контейтера а контейнер Цитата:
Цитата:
|
рони, не понял о чем ты, если честно.)
|
Часовой пояс GMT +3, время: 12:35. |