3

問題を説明しやすいようにスケッチを作成しました:( 出典：mielai.lt）スケッチ

つまり、3つの色付きの長方形はdiv、赤い長方形はコンテナ、緑のdivにはロゴなどがあり、青いdivにはliタグで囲まれたサムネイルがあります。すべてのdivは自動幅になっています。サムネイルは浮いているので、画面が広いほど動的に並んでいるサムネイルが多くなりますが、もう1つの親指がそこに到達するには狭すぎるため、右側には常にスペースが残っています。

青いdivの幅を親指の終わり、青い点線のある場所に近づけて、動的に変化させる必要があります。

2つ目は、緑のdivです。理想的には、点線で終わる青のdivの幅と一致させて、緑のdivの内容が全体の外観から外れないようにします。

これらを作ることは可能ですか？はいの場合、その方法を説明するか、例を挙げてください。

私はさまざまな例を含めてさまざまなことを自分で試しましたが（特定の内部divが外部divの幅を制御するようにするだけです）、それらは私には機能しません。

助けていただければ幸いです。前もって感謝します！

4

4 に答える 4

3

私はそのような状況を次のように修正しました:

float:left;

外側の DIV に。

于 2013-11-28T11:31:17.010 に答える
2

私の知る限り、これを行うには JavaScript を使用する必要があります (または、少なくとも JavaScript で行うのは非常に簡単です)。たとえばjQueryを使用すると、次のことができます。

$(window).resize(function(){
    var original_blue_width = $("#red").width() - 2*3;
    var blue_width = original_blue_width - (original_blue_width % (10+5));
    $("#blue").width (blue_width);
    $("#green").width (blue_width);
});

ここで、3 は赤と青のボックスの間のパディング、5 はサムネイル間のパディング、10 はサムネイルの幅です。
何か不明な点があれば質問/コメントしてください。

于 2012-08-22T07:15:56.360 に答える
0

質問には javascript/jquery のタグが付けられていないため、CSS ソリューションは次のようになります。

私が言いたいのは、緑と青のボックスを囲む外側の div を作成できるということです。この外側の div に幅を与え、プロパティを設定しますmargin:0 auto;。これは、左右から等間隔で囲まれたすべての小さな黒いボックスに適合します。

于 2012-08-22T09:23:41.110 に答える
0

このフィドルを試してください

ステップ 1:サム ボックスの実際の幅を計算します。つまり、幅 + 2*(ボーダー + マージン + パディング)

ステップ 2:連続して親指の数を計算します (ここで考える必要があります) 私が行ったことは、すべての親指の上部をチェックしたことです 関数 calculate_in1Row ()を参照してください

HTML:

<div class="red">
    <div class="green">Logo</div>
    <div class="blue">
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
    </div>
</div>​

CSS :

.red {border:1px solid red; }
.green{border:1px solid green; margin:2px;}
.blue{border:1px solid blue; margin:2px; overflow:auto;}
.thumb {border:1px solid black; width:40px; height:40px; margin:2px; padding:3px;  float:left}

jQuery:

$(document).ready(function() {
    var tw = $(".thumb").width() + 2 * (1 + 2 + 3); // width + 2*(border+margin + padding)
    tw = tw * calculate_in1Row()
    $(".blue").width(tw);
    $(".green").width(tw);
});

// function ti calculate no of thumb box in single row
function calculate_in1Row() {
    var in1Row = 0;
    $('.blue .thumb').each(function() {
        if ($(this).prev().length > 0) {
            if ($(this).position().top != $(this).prev().position().top) return false;
            in1Row++;
        }
        else {
            in1Row++;
        }
    });

    return in1Row;
}​
于 2012-08-22T09:00:20.717 に答える