単一行にない要素を検出して再配置する

Question

ng-repeat（Angular JS）を使用して、プロジェクト内にボタンを作成します。これは、最大テキスト長を持つと仮定しています。これにより、すべてのボタンが1行に表示されます。 （たとえば1行×4ボタン）

いずれかのボタンに追加のコンテンツがある場合は、最後のボタンが次の行に移動します。 （1行×3ボタン& & 1行×1ボタン）

この場合、2行×2ボタンとしてボタンを再配置したいと思います。ボタンが次の行に分割されていることをどのように検出できますか？

私のプロジェクトでjqueryが見つかりました。ソリューションがjqueryでもあれば問題ありません。ここで

は、問題は「孤児」ボタンを持っているのであれば、あなたはボタンの単一の行を取得flex containerを使用できるサンプルJSFIDDLEリンク

<h4>Coded Output</h4> 
<button>Hello World</button> 
<button>Hello World</button> 
<button>Hello World</button> 
<button>Hello World</button> 
<br> 
<br> 
<h4>Actual Output</h4> 
<button>Hello World</button> 
<button>Hello World - Addln Content</button> 
<button>Hello World</button> 
<button>Hello World</button> 

<h4>Expected Output</h4> 
<div class="expected"> 
<button>Hello World</button> 
<button>Hello World - Addln Content</button> 
<button>Hello World</button> 
<button>Hello World</button> 
</div> 

CSS

button{ 
    min-width:130px; 
    height:40px 
} 

.expected button{ 
    min-width:200px !important; 
} 

Answer 1

ですボタンのコンテンツが「あまりにも多い」（ボタン内にテキストが流れる）場合でも、 this Fiddleを確認してください。 チェックbrowser's support and issues of the flex method。

HTML

<div class="container"> 
    <button>Hello World</button> 
    ... 
    <button>Hello World</button> 
</div> 

CSS

.container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-flow: row nowrap; 
} 
.container button { 
    -webkit-flex: 1 1 auto; 
    flex: 1 1 auto; 

    /* fix original css rules to let button's height changes */ 
    min-height: 40px; 
    height: auto !important; 
} 

Answer 2

あなたの要素がまたがる行数を確認するためにjQueryの.offset()や.position()は、これらの要素の位置を決定するために使用し、「トップ」の値を比較することができます。

あなたはdiv.expected

<div id="actual"> 
    <h4>Actual Output</h4> 
    <button>Hello World</button> 
    <button>Hello World - Addln Content</button> 
    <button>Hello World</button> 
    <button>Hello World</button> 
</div> 

で行ったように、各ボタングループは、（DOM負荷ハンドラに包まれた）javascriptのは、単に行の数をカウントして、注入、ラッパー要素内であればそれは多少容易になるだろう必要に応じて第2要素の後に<br/>を追加します。 jsfiddle

$(function() { 
    var rows = 0, 
     last = null; 
    $('#actual button').each(function() { 
    var offset = $(this).offset(); 
    if(last !== offset.top) { 
     rows++; 
    } 
    last = offset.top; 
    }); 

    // Note this is hard-coded for 2 lines, and adds a line break after 
    // the 2nd element, but you can change as needed to work in general 
    if(rows === 2) { 
    $('#actual').addClass('two-lines'); 
    $('#actual button:eq(1)').after('<br/>'); 
    } 
});