1

以前はウェブサイトのスタイルを設定していましたが、今回は完全に途方に暮れています。ここ数時間、私はこれで頭を悩ませています（誇張ではありません）。動的に生成された (php または ajax 呼び出しを介して) DIV をラップするには、白い背景を持つ親 DIV が必要です。このようにして、希望どおりのデザインを作成できます (画像間の 1 ピクセルの余白)。

これは、私が設定した jsFiddle です。時間がある場合は、http: //jsfiddle.net/5eJjy/

そして、ここに「ライブ」バージョンがあります: http://developer.sodobniinternet.eu/es-photo/

問題:div.images幅がなくdisplay:inline-block、親の幅に拡張されます。CSS に関する私の経験では、インライン ブロックを使用した DIV は、含まれている要素をラップする必要がありますが、そうではありません。

試した: の幅をdiv.items削除し、すべての css を 1 つずつ削除し、問題のある部分だけを別のファイルに入れて、動作させようとしました (動作する場合もあれば、動作しない場合もあります)。

期待される結果:コンテナ間の 1 ピクセルのスペースと 1 ピクセルの白い境界線でdiv.imagesすべてをラップします(実際には、1 ピクセルのパディングで境界線を偽造します)。div.imgContainerdiv.imgContainerdiv.images

問題のスクリーンショットを作成しました。どのようにしたらよいですか。

間違い: http://shrani.si/f/2r/d0/1K6RkAyH/no.jpg

予想: http://shrani.si/f/3F/pw/Egu9OES/expected.jpg

お時間をいただき、ありがとうございました。

編集: 期待される結果を更新しました。ちゃんと書いていないことに気がつきました。

解決策: http://jsfiddle.net/ebF8q/

を削除し、 (不要なスペースを削除するために)div.images親 div に設定し、追加/更新したところ、目的の結果が得られました。スクリーンショット: http://shrani.si/f/2C/pi/2T0FUvWD/done.jpgfont-size:0div.imgContainerborder: 1px solid #fff; margin: 0 -1px -1px 0px;

4

2 に答える 2

0

CSSでいろいろやってみましたが、うまくいきませんでした。これは、JS のみを使用するアプローチです。

$(window).load(function () {
    $('.items').css('width', ($('#content').innerWidth() - (parseInt($('.filters').width()) + parseInt($('.filters').css('padding-left')) + parseInt($('.filters').css('padding-right')) + parseInt($('.filters').css('margin-left')) + parseInt($('.filters').css('margin-right'))) - 2) + 'px');
});
$(window).resize(function () {
    // original container size
    var consize = $('#content').innerWidth() - (parseInt($('.filters').width()) + parseInt($('.filters').css('padding-left')) + parseInt($('.filters').css('padding-right')) + parseInt($('.filters').css('margin-left')) + parseInt($('.filters').css('margin-right'))) - 2;
    // size of single contained image
    var imgsize = $('.imgContainer').outerWidth(true);
    // difference of full (max) and wanted size
    var margin = consize % imgsize;
    // set size/margin, so that wraps max number of images
    $('.items').css('width', (consize - margin + 1) + 'px');
    $('.items').css('margin-right', margin + 'px');
});
于 2013-02-19T13:42:07.790 に答える
-1

私は奇妙なハックを達成しました: http://jsfiddle.net/CGPBM/

div.images の背景を削除し、div.imgContainer に境界線を追加し、マージンを -1px -1px に設定します

.images {    
    font-size: 0px;
}

.imgContainer {
    max-width: 250px;
    max-height: 188px;
    position: relative;
    display: inline-block;
    border: 1px solid white;
    margin: -1px -1px;
}

しかし、いくつかの解像度でテストする必要があります (JSfiddle はとても小さいです ...)

あなたのウェブサイトにもそれを適用しましたが、間に空白を取り除く必要があります。 <div class="imgContainer"></div><div class="imgContainer"></div><div class="imgContainer"></div>

于 2013-02-19T12:27:55.797 に答える