0

問題: Div は 850px で、さまざまな数の子要素 ​​(リンク要素の画像) があります。幅が自動的に変更されるようにして、親 div の間に 10 ピクセルの幅のギャップを埋めるようにします。また、それらは親で正当化され、最初と最後の子はそれぞれ左と右にギャップがあってはなりません。

サイズ変更とフィッティングは問題なく機能しますが、ギャップを埋める方法がわかりません。

    $(".products a img").width($("#products_div").width() / $(".products a img").length);
4

1 に答える 1

1

また、競合やエラーを簡単に特定できるように、この種の問題に関する CSS と HTML マークアップも提示していただく必要があります。またはdisplayの設定の違いにより、実行しようとしているものとは異なる結果が生じる可能性があります。floatmargin

これがあなたのマークアップだと思います：

<div id="products_div" class="products">
    <a><img src="..."/></a>
    <a><img src="..."/></a>
    <a><img src="..."/></a>
    <a><img src="..."/></a>
    <a><img src="..."/></a>
    <a><img src="..."/></a>        
</div>

CSS は次のようになります。

#products_div { width:850px;}
.products a img{ float:left; }

これは、js/jquery を使用して画像の幅とギャップを解決する方法です。

var gap = 10;

var imgWidth = ($("#products_div").width() + gap) / $(".products a img").length;

$(".products a img").width(imgWidth - gap).css({'margin-right':gap}).last().css({'margin-right':0});

ここにフィドルがあります

于 2013-11-14T04:07:32.870 に答える