2011-12-03 7 views
1

私はfloatを使用してDIVを並べて配置しますが、余分なDIVが2番目の行(行)を形成するときに問題が発生します。次の行は、最後のDIVの高さに基づいて形成される(最も高いDIVではない)。したがって、不完全な行が形成される。CSS float:最も高いDIVに基づいて2番目の行を作成する方法は?

は、私はラインに紫と緑のdivを配置したい。ここhttp://jsfiddle.net/etrader/6qZnk/

で例を参照してください。しかし、紫色のDIVは不完全な行を形成するので、緑色のDIVは別の行に移動します。私は、最も高いDIV(すなわち、青のDIV)の高さに基づいて次の線を形成したい。

注:ボックスの高さは事前定義されておらず、動的に設定されています。

答えて

3

浮動小数点の代わりにinline-blocksを使用するとどうなりますか?あなたのブロックが水平に互いに接触している場合

http://jsfiddle.net/6qZnk/1/

は残念ながら、インラインブロックは、最善の解決策

+0

があります参照してくださいではありません要素間の空白を避けるなど、いくつかの回避策があります。 – urraka

3

利用display:inline-block代わりのfloat:left

使用example

関連する問題