4

ラッピングdiv要素内に一連のタイルを配置しようとしています。現時点では、それらはラッピングdivの内側に表示され、水平方向にラッピングしてタイルとして表示されるのではなく、divの外側にオーバーフローします。これがJSFiddleの例です。

それらがどのように表示されるかの例を示すために、タイルが新しい列に折り返されるWindowsMetroインターフェイスを見てください ここに画像の説明を入力してください 。CSSは次のとおりです。

body {
    margin-top: 50px;
    background: #238d9a;
}

#metro {
    width: 960px;
    height: 340px;
    background: #004050;
    margin: 0 auto;
    padding: 10px;
}

.tile {
    width: 100px;
    height: 100px;
    background: white;
    margin: 0px 10px 10px 0px;
}​
4

2 に答える 2

5

単に追加する必要があります

display:inline-block;

あなたのタイルに。ここでjsfiddleを更新しました：

http://jsfiddle.net/cgMGM/1/

別の方法は追加することfloat:left;ですが、この場合、＃metro divが高さを失うのを防ぎ、余分な.clear-fixナンセンスの必要性を防ぐためにインラインブロックが推奨されます。

于 2012-12-10T21:21:45.683 に答える
0

簡単に使用できます

.tile{
      word-wrap: break-word;
      }

そして今、あなたはあなたのdivでこのクラスを使うことができます

于 2019-10-18T10:11:43.687 に答える