1

次のコードがあります。

<div style="width:560px">
    <div style="float: left; width: 50%; margin-bottom: 20px">
        <div style="float: left; width: 40%">
            <!-- Thumbnail -->
        </div>
        <div style="float: left; width: 60%">
            <!-- Title -->
            <!-- Author -->
            <!-- Price -->
            <!-- Quantity -->
            <!-- Add to Cart -->
        </div>
    </div>
</div>

これは、次のようになりChromeます。 ここに画像の説明を入力

しかし、これは次のようになりFirefoxます。 ここに画像の説明を入力

Firefox を Chrome のように表示するにはどうすればよいですか?

4

2 に答える 2

3

編集：就寝時の読書：960グリッドシステム

これは、Chrome ではなく、Firefox では最初の要素の高さが 3 番目の要素を「押す」ためです。なぜそれが起こっているのか、私にはわかりません。これは、固定高さが使用されていない場合によくある問題です。私の意見では、何かがどれだけ高くなるかを実際に知ることはできないため、これは避けることをお勧めします。

レイアウトにわずかな回避策を提案できますか。少し手動ですが、「行のような」レイアウトが保証されます。divを追加するだけrowで、少なくとも 2 つのアイテムが連続して存在することを確認できます。

<div id="container">
    <div class="row">
        <div class="item">Item 1...</div>
        <div class="item">Item 2...</div>
    </div>
    <div class="row">
        <div class="item">Item 3...</div>
        <div class="item">Item 4...</div>
    </div>
    <div class="row">
        <div class="item">Item 5...</div>
        <div class="item">Item 6...</div>
    </div>
</div>

新しい行の開始を「プッシュ」するには、rowクラスで両方をクリアする必要があります。

長所：

  • 常に 2 つのアイテムが並んでいます
  • アイテムは常に一番上のレベルから開始されます

短所

  • 行ごとの項目に変更するxと、HTML の変更が必要になります
于 2012-05-09T15:06:36.277 に答える
1

常にCSSリセットを使用する必要があります。これらの問題を完全に回避するのに役立ちます。私が個人的に使用しているのはこれです：http： //html5reset.org/

乾杯、ロビン

于 2012-05-09T15:12:46.080 に答える