IE float div wrapping - VoidCC

css

internet-explorer-7

2011-06-27 15 views 4 likes

4

フローティングdivとIE7に問題があります。たとえば、次のHTMLコード：IE float div wrapping

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'> 
    <head> 
    <title>IE Float Test</title> 
    <style> 
     .container { 
     width: 200px; 
     background: #ddd; 
     overflow: hidden; 
     } 
     .item { 
     float: left; 
     padding: 5px; 
     background: #eee; 
     margin: 5px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="item">This is a item</div> 
     <div class="item">This is another item</div> 
     <div class="item">Last item</div> 
    </div> 
    </body> 
</html>

与えるのクロム（プラス他の主要なブラウザ）に次の

Chrome Result

しかし、IE7で次

IE Result

大きすぎる場合は、項目divを次の垂直位置に移動するにはどうすればよいですか？

多くのありがとう、ジョン。許容できるということですhttp://jsbin.com/ifexuf/2

：

2011-06-27 drummondj

+0

有効なHTMLですか？ ''タグにカンマがあります： 'lang = 'en'、xml：lang = 'en'>' – Blender

+0

ブレンダーありがとう - 私はそれを修正しました。しかし、同じ結果！ – drummondj

+1

最初に積み重ねておきたいのであれば、なぜそれらを浮かべていますか？ –

A

答えて

4

に分-widthプロパティを追加する必要がありますか？

2011-06-27 00:38:00 thirtydot

+0

パーフェクト - ありがとう。 – drummondj

0

あなたはwhite-space: nowrap.itemに作品を追加.item

2011-06-27 00:37:26 user194076

+0

しかし、私はどんな価値がありますか？私はどれくらいのテキストが各アイテムにあるのか分かりません。アイテムにはそのアイテムに含まれるテキストの幅だけが必要です。複数のアイテムが十分に小さい場合、それらのアイテムが同じ垂直位置にあるようにします。 – drummondj

0

アイテムを積み重ねたい場合は、 ".item" CSSスタイルで "float：left"する必要はありません。 <div>のようなブロックレベルの要素は、デフォルトで積み重ねて表示されます。

2011-06-27 00:50:24 saille

関連する問題