2

問題を詳細に説明するには、いくつかの仮定を立てる必要があります。

  1. 長さが不明なアイテムのリストがあります（1、2、または50の場合もあります）
  2. それらをグリッドに表示したい - 行のアイテム数は不明です (ユーザーのディスプレイ解像度によって決まります)。
  3. すべてのアイテムの幅は同じで、たとえば 250px に固定されています。
  4. アイテムの間隔は、ディスプレイの解像度によって決定するか、コンテナーの幅を縮小する必要があります。
  5. 私はJSを使いたくない。

FoodGawkerで私がやりたいことを正確に見ることができます。解像度の異なる2台のモニターを使用しています。ブラウザをあるブラウザから別のブラウザにドラッグ アンド ドロップすると、複数のアイテムが一列に配置されますが、すべてが中央に配置され、左右対称になっています。JSを無効にしても動作します。

だから私はそれが可能であることを知っています、私が知らないのはそれを行う方法です.

float:、display: などのさまざまなバリエーションを試しましたが、うまくいきませんでした。

以下のコードは、私が望むものに最も近いものです - 2 つの内部 div では問題なく動作しますが、多くの場合、中央に配置されなくなりました。何か案は？

.center_wrapper {
    background: grey;
    padding: 10px;
    text-align: left;
    overflow: hidden; 
    display:inline-block;
}

.cards_wrapper {
    background: red;
    overflow: hidden; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 90%;

}
.card {
    background: blue;
    width: 250px;
    height: 250px;
    margin: auto 20px;
    display:inline;
}


<div class="cards_wrapper">
    <div class="center_wrapper">
        <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
        <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
    </div>
</div>

ここに画像の説明を入力

10のため

4

2 に答える 2

13

用途inline-blockと%margin

デモ: http://jsfiddle.net/MadLittleMods/9SZDC/

.block
{
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;

    width: 250px;
    height: 100px;
    background: #aaeeff;

    margin: 1%;
}​

ブロックを中央に配置したい場合は、コンテナにテキスト整列を追加できます

.container
{
    text-align: center;
}
于 2012-11-20T21:54:30.070 に答える
1

text-align: left;fromを削除する.center_wrapperとうまくいくはずです。

ここに見られるように。

于 2012-11-20T21:50:43.150 に答える