ブロックまたは単一の線要素

Question

3つの要素をすべて1つの行に表示する方法はありますか？

私は3つのインラインokを表示することができますが、行の2つの要素と次の行の最後の要素を避けたいと考えています。 必要条件は、好ましくはメディアクエリを使用しないことです。

Answer 1

以下のようにJavascriptまたはjQueryで行うことができます。各要素の幅を取得します。これらの合計はラッパー要素の幅を超える場合、それによって100％の広いそれらを作る、display: inline-blockからdisplay: blockに要素を変換します

$(document).ready(function() { 
 
    var L1 = $(".x1").width(); 
 
    var L2 = $(".x2").width(); 
 
    var L3 = $(".x3").width(); 
 
    var sum = L1 + L2 + L3; 
 
    var availableSpace = $(".wrapper").innerWidth(); 
 
    if (availableSpace < sum) { 
 
    $(".x").css('display', 'block'); 
 
    }; 
 
})

body, 
 
html { 
 
    margin: 0; 
 
} 
 

 
.x { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    border: 1px solid #bbb; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="wrapper"> 
 
<div class="x x1">11111111111 11111111111111 11111111111111</div><div class="x x2">2222222222222 2222222222222 222222222222</div><div class="x x3">333333333333 333333333333333333</div> 
 
</div>

スニペットのフルスクリーンを見てくださいの効果。 .wrapper DIVの代わりに、これら3つの要素の周囲に親要素がない場合は、bodyをjQuery関数で使用することもできます。