0

固定幅の親 div に動的に作成された div がいくつかあり、それらを水平に分散させたいと考えています。それらは動的に作成されるため、回避しようとしているJSで数えない限り、コンテナー内にいくつあるかわかりません。

私はもともと、このページで「インラインブロックと両端揃えテキストを使用する」テクニックを試していました。ただし、収まりきらないほど多くの子がある場合 (つまり、行が 2 つある場合)、(ここで 2 番目の行を参照)、動作が少し不安定になるように思われるので、うまくいかないと思います。

*編集：実際には、実際には不安定ではなく、2行目を正しく間隔を空けていることに気づきましたが、代わりに（この特定の例ではとにかく...）、2行目の3つの赤いボックスが占めるようにする必要があります最初の行の最初の 3 つの位置の下に配置し、2 つの位置を空けるのではなく、最後に 2 つの位置を空けておきます) .... したがって、一般的に、この手法は私にはうまくいかないと思います。

上記を達成するための他の方法の提案はありますか。JSを使用する必要はありませんが、他に方法がない場合は、提案を受け付けています。

4

4 に答える 4

0

おそらく、内部 div には固定幅ではなく相対的な幅を使用してください....

#testcontainer div {
 width: 19%;
 height: 30px;
 display: inline-block;
 background: red;
float: left;
margin: 2px;

}

デモ

于 2013-01-15T20:40:48.677 に答える
0

それはfloatsのネイティブな動作です。

より多くの行に収まるようにするには、コンテナーを大きくするか、ボックスを狭くします。

それらをまったく折り返したくない場合はoverflow:auto、コンテナーの CSS に追加すると、スクロール バーが表示されます。

于 2013-01-15T19:12:53.600 に答える
0

私はJSを使用する必要があることを認めました。4 番目の子に id を追加し、CSS で 4 番目の子からマージンを削除することができました (これはすべて、nth childIE8 のサポートが必要なければ、CSS を使用して行うことができたと思います)。

編集：ついに私が欲しいものを手に入れました - http://jsfiddle.net/byronyasgur/kUgBA/14/

于 2013-01-15T22:07:34.413 に答える
0

コンテナの幅を削除し、追加display: inline-block;して、内部のコンテンツの幅を dic コンテナに許可する必要があります。overflow: auto;また、div のサイズをその中に生成された div の量に合わせて追加します

#container {
  display: inline-block;
  background:olive;
  overflow: auto;
  height: 180px;
}
于 2013-01-15T19:27:30.087 に答える