異なる高さのフローティングブロックの行をクリアする

Question

私は少し修正したSoh TanakaのSmart Columnsを使用していますが、この例ではすべてのブロック/カラムの高さが同じです。異なる高さのdivがある場合は、jsfiddleのように分割されます。私はDeSandroのMasonryがどのように高さの問題を処理するのが好きではありません。なぜなら、ウィンドウサイズに応じてブロックを再スクランブルするので、暗黙の順序が失われてしまいます。

現在解決しようとしている解決策はthisですが、行/行の両側をクリアする際に問題があります。私はJavaScriptを使用して、すべての行/行の末尾に<span style="clear: both;"></span>を挿入することができますが、これは、ウィンドウのサイズが変更されたとき、およびそのようなスマートな列の複数のグループが1ページにある場合に、私はこれらのケースに対処するためのスクリプトを書くことができると確信していますが、より簡単な方法があると思います。

フローティングブロックのリストを折り返す必要がある場合は、前の行/行の最も背の高いボックスの一番下から開始するのが最も簡単な方法ですか？ CSSのみのソリューションが望ましいですが、javascript/jQueryベースのソリューションも受け入れられます。 （DIVブロックのトップの位置合わせはおそらく良く見えるでしょうが、文字が縦にデフォルトで彼らのベースラインに整列している）別の方法で言い換える

は

、私は、異なるサイズの文字は「浮いて」いるかのようなブロックをフロートしたい：

Answer 1

あなたはfloat: leftからdisplay: inline-block; vertical-align: topに切り替えることができます。

http://jsfiddle.net/thirtydot/LCDDD/1/

Iはまた、JavaScriptをほんの少し加えた：

$(this.config.column_selector).contents().filter(function() { return this.nodeType === 3; }).remove(); 

inline-blockを残念ながら、HTMLでの空白の影響を受け、その結果、スニペットはli要素間のテキストノードを削除しています。代わりに、利用可能なCSSの修正がある（不利な点があります）か、ただremove the whitespace in your HTMLでもかまいません。

Answer 2

これはあなたが探しているものか分かりませんが、私は同じような問題があったと思います。 （名前はそれが機能だのビットunfittingですが）私の助けに、私はこの小さなプラグインを書いている：

(function($) { 
    $.fn.extend({ 
    fixLineBreak: function(css) { 
     var minLeft = $(this).position().left; 
     return $(this).each(function() { 
     var position = $(this).position(); 
     if (position.left > minLeft && $(this).prev().position().left >= position.left) { 
      $(this).css(css); 
     } 
     }); 
    } 
    }); 
}(jQuery)); 

あなたがそうのようにそれを使用します。

$('#my_boxwrapper li').fixLineBreak({ 
    clear: 'left' 
}); 

デモ：http://jsfiddle.net/v79Cu/

Answer 3

thirtydotで説明したように、インラインブロックは間違いなく道のりです。あなたは確かにちょうどCSSでこれを達成することができます。あなたの列に続いて

.col-group { 
    font-family: monospace; /* for spacing columns correctly */ 
    letter-spacing: -.65em; /* this too */ 
    margin-left: -1em; 
    margin-right: -1em; 
    text-align: left; /* center or justify for columns in last row */ 
    display: block; 
} 

（私はあなたがこれらの「ボックス」という名前だと思う）、このCSSを適用します。あなたのラッパーで

はそれを次のCSSを与える、（私はあなたが「列」という名前を付けだと思います）：

.box { 
    font-family: Serif; /* be sure to reset the font and letter-spacing */ 
    letter-spacing: normal; 
    display: inline-block; 
    padding-left: 1em; 
    padding-right: 1em; 
    position: relative; 
    float: none; 
    text-align: left; 
    vertical-align: top; /* align row's columns along top or baseline */ 
    box-sizing: border-box; 
} 

私はスマート列を使用していないが、それだけで幅を変更だとして、それは右、このCSSと連携して非常によく仕事ができるように思えますか？

とにかく、working exampleをチェックアウトしたり、this fiddleで遊んだりできます。私はこれを「インラインブロックグリッド」と呼び、それについてもblog postと書いています。