1

左のフローティング div に最小および最大の幅/高さを設定し、それらを展開して親要素 (ボディ) を埋めようとしています。cssでこれを達成する方法があるかどうか疑問に思っていました。そうでない場合は、JSを使用できるかもしれません。

この効果を想像するために、ウィンドウのサイズ変更を開始すると、いくつかの div が移動するのに十分な大きさになるまで、div の右側に空のスペースがあることに気付くでしょう。私がやりたいことは、最大数に達するまですべての div を拡張して空のスペースを埋めることです。そこにさらに div を追加するときが来ました。その時点で、div のサイズは行の数に基づいて再調整されます。 .

最後に、これらの div が最大幅を超えたり、最小幅を下回ったりしないようにしたいのですが、これらの制限内で自己調整して、ボディの幅全体を埋めます。

コード例は次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <style>
      .imageitem {
        background-color: blue;
        margin: 0 5px 5px;
        min-width: 200px;
        min-height: 200px;
        max-width: 250px;
        max-height: 250px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
    <div class="imageitem"></div>
  </body>
</html>
4

3 に答える 3

4

あなたが求めているのは、基本的には応答性だけですが、実際には比較的複雑なレイアウトです。基本的に、たとえば、画面全体に拡大する2つのdiv（テーブル内の2つのセルのように）が必要ですが、画面が特定の幅に達すると、3番目のdivが行に移動します。

クラークが言うように、指定した寸法と画面全体の両方を取得することはできません。幅505ピクセルでは、2つのdivが収まります（2x 250、5ピクセルのギャップ）。3つは少なくとも幅610ピクセル（3x 200、2x 5ピクセルのギャップ）になるまで収まりません。つまり、divが画面全体に表示されない幅が105ピクセルあることを意味します。

メディアクエリはおそらくこれに最適ですが、マージンは5ピクセルではなくパーセンテージで指定する必要があります（jQueryなどで実行する場合を除く）。

クラークの答えから変更されたのは、このフィドルhttp://jsfiddle.net/UHqWF/2/です。

body {
    background:#edeee6;
}

.imageitem {
    -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
         box-sizing:border-box;
    float:left;
    max-width:250px;
    min-width:200px;
    padding:5px;
    width:100%;
}

    .imageitem div {
        background:#4e84a4;
        max-height:250px;
        min-height:200px;
    }

@media all and (min-width:420px) {
    .imageitem {
        width:50%;
    }
}

@media all and (min-width:630px) {
    .imageitem {
        width:33.33333%;
    }
}

@media all and (min-width:840px) {
    .imageitem {
        width:25%;
    }
}

@media all and (min-width:1050px) {
    .imageitem {
        width:20%;
    }
}

しかし、上で説明したように、それはびくびくしています。

より良い解決策は、 http：//jsfiddle.net/UHqWF/3/のように、幅の制限を課さないことです（したがって、右側の時折のギャップを止めます）。

body {
    background:#edeee6;
}

.imageitem {
    -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
         box-sizing:border-box;
    float:left;
    padding:5px;
    width:100%;
}

    .imageitem div {
        background:#4e84a4;
        min-height:200px;
        text-align:center;
    }

@media all and (min-width:420px) {
    .imageitem {
        width:50%;
    }
}

@media all and (min-width:630px) {
    .imageitem {
        width:33.33333%;
    }
}

@media all and (min-width:840px) {
    .imageitem {
        width:25%;
    }
}

@media all and (min-width:1050px) {
    .imageitem {
        width:20%;
    }
}​

または、 http：//jsfiddle.net/UHqWF/4/のように、端ではなく中央に余分なスペースを設けることもできます。

body {
    background:#edeee6;
}

.imageitem {
    -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
         box-sizing:border-box;
    float:left;
    padding:5px;
    width:100%;
}

    .imageitem div {
        background:#4e84a4;
        max-width:250px;
        margin:0 auto;
        min-height:200px;
        text-align:center;
    }

@media all and (min-width:420px) {
    .imageitem {
        width:50%;
    }
}

@media all and (min-width:630px) {
    .imageitem {
        width:33.33333%;
    }
}

@media all and (min-width:840px) {
    .imageitem {
        width:25%;
    }
}

@media all and (min-width:1050px) {
    .imageitem {
        width:20%;
    }
}​
于 2012-11-19T00:28:08.560 に答える
1

私は、CSS3 列をサポートするブラウザーで CSS3 列を使用し、IE 9 以下などをサポートしないブラウザーで要素を浮動列にラップする jQuery プラグインを作成しました。

サイズ変更では、アイテムの縦横比が維持されます。トランジションを 100% 滑らかに見せることは事実上不可能ですが、ブラウザによっては適度に滑らかに見えます。

使用できる設定がいくつかあり、それらはコメントされています。

開始するコードは次のとおりです。

$('#container').adjustColumns({/* options*/});

私の動機の一部は、CSS3 の使用法とフォールバック メソッドの学習曲線を増やすことだったので、これをさらにサポートできることを嬉しく思います。

デモ: http://jsfiddle.net/SbvGJ/show/

于 2012-11-20T00:13:27.823 に答える
0

まず、最小幅が200ピクセル、最大幅が250ピクセルです。

  • 画面サイズが750pxから800pxの場合、最大50pxのギャップがあります
  • 画面サイズが500pxから600pxの場合、最大100pxのギャップがあります
  • 画面サイズが250pxから400pxの場合、最大150pxのギャップがあります

これが、レイアウトの計算がどのように機能するかを示しています。

それでよければ、おそらくメディアクエリを試すことができます。

だからこのようなもの：

.imageitem {
    background-color: blue;
    //For the sake of simplicity, i've set the margin to 0.
    //You will need to redo the maths or restructure your HTML for margins to work
    //Perhaps using an inner div with a margin
    margin: 0px;
    min-width:200px;
    min-height:200px;
    max-width:250px;
    max-height:250px;
    float:left;
}

@media all and (max-width:250px) and (min-width:200px) {
    .imageitem {
        width:100%;
    }
}

@media all and (max-width:500px) and (min-width:400px) {
    .imageitem {
        width:50%;
    }
}

@media all and (max-width:750px) and (min-width:600px) {
    .imageitem {
        width:33%;
    }
}

@media all and (max-width:999px) and (min-width:800px) {
    .imageitem {
        width:25%;
    }
}

@media all and (max-width:1249px) and (min-width:1000px) {
    .imageitem {
        width:20%;
    }
}

If you need the height to resize as well, you could write a similar query for min-height and max-height. Just make sure you set the height on the html, body selector as well.

于 2012-11-18T00:03:32.613 に答える