2011-06-28 13 views
1

私は、3つの画面全体にフィットするように高さが設定されていない一連の浮動小数点divを持っています。設定された高さでは表形式のレイアウトのままですが、一方のテキストの長さが他方のテキストの長さより長い場合、ボックスは奇妙な方法で分割されます。divを強制的にグループ化する方法はありますか?

2つの後続のdivの辺の間のマージンが強制されるようにボックスをグループ化する方法はありますか、特定の高さを設定するだけですか?

+0

Mozillaには、この種のことを行う際のブラウザの問題などを扱う素晴らしい記事があります。http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ Itあなたに役立つかもしれません。 – Brent

答えて

3

これはあなたが欲しいものに似ていますか?

http://jsfiddle.net/9xpja/

それはdisplay: inline-blockvertical-align: topを使用しています。

もしそれらがすべて同じようなブロックに収まるのであれば、他のソリューションが "列"を作成することによって投稿されたようなことが必要になります。

+0

これは私が探していたものですが、div要素にこれらの2行を追加しても移動しませんでした。本当にVert-Alもそうすると思った。 –

+1

@Magic Lasso: 'display:inline-block'を動作させるには' float:left'を削除する必要があります。 – thirtydot

+0

@thirtydotは、IEのいくつかのバージョン(たぶんちょうど6)はブロック要素に対して 'inline-block 'を受け入れないので、divの代わりにスパンを作る必要があると確信しています。 –

3

各列を別々のdivに入れてみると、ギャップを取り除くことができます。しかし、ディビジョンは、もはやお互いに整列することはありません。

+0

Yeaは、PHPですべてが生成され、カウンタを追加する必要がないため、これを避けることを望んでいました。しかしこれはおそらく最良の解決策です。 –

2

親列のdiv内に3つの列divをいつでも追加できます。次に、親divの垂直方向の配置を設定します。それは彼らに適合し、「グループアップ」させるでしょう。

関連する問題