0

基本的に、「img-container」div に「style="width:__」を追加する必要があります。幅はすべての画像とそのパディングの合計です。画像と画像の幅は CMS を介して動的に追加されるため、動的に幅を計算するには JavaScript が必要です。

<div id='img-container'[HERE IS WHERE I NEED THE WIDTH TO BE ADDED]>
<div class='picture_holder' >
<div class='picture' >
<img src="{image}" style='width:{width}px;padding-right:10px;'/>
<div class='captioning'>{caption}</div>
</div>
</div>
</div>

私はJavaScriptをまったく知りませんが、何かをつなぎ合わせようとしました（まだパディングを追加することさえできませんでした）：

<script type="text/javascript">
var $name = ('div#img-container');
var Imgs = div.getElementsByTagName('img');
var w = 0;
for ( var i = 0; i < Imgs.length; i++ ){
    w += parseInt(Imgs[i].offsetWidth);
}
</script>

それは明らかにまったく機能していません。どんな助けでも大歓迎です！

4

1 に答える 1

0

コードにバグがありvar $name = ('#div ...ます。を使用する必要がありますdocument.getElementById(id-of-element)。#div...構文はjQueryセレクターであり、私が理解しているように、jQueryを使用していません。次にdiv.getElementsByTagName('img') to get only the list of images inside thediv` を呼び出します。これを試して：

<script type="text/javascript">

function add_width_of_images(container) {
    var div = document.getElementById(container);
    if (!div) return;

    var Imgs = div.getElementsByTagName('img');
    var w = 0;
    for ( var i = 0; i < Imgs.length; i++ ){
        w += parseInt(Imgs[i].offsetWidth);
    }
    div.style.width = w + "px";
}
add_width_of_images('img-container');

</script>
于 2012-05-14T00:29:56.730 に答える