블록 또는 단일 라인 요소

Question

3 개 모두에 사용할 수있는 공간이있을 경우 한 줄에 3 개의 요소를 표시하는 방법이 있습니까? 그렇지 않은 경우 각 요소를 하나의 별도 행에 표시 하시겠습니까?

그래서 3 인라인 ok를 표시 할 수 있지만 행의 2 개 요소와 다음 행의 마지막 요소는 피하고 싶습니다. 필수적으로 미디어 쿼리를 사용하지 않는 것이 좋습니다.

Answer 1

아래와 같이 Javascript 또는 jQuery로 할 수 있습니다. 각 요소의 너비를 가져옵니다.

$(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>

보고 니펫 전체 화면을 확인 :이의 합이 래퍼 요소의 폭보다 더 많은 경우, 이에 그들에게 넓은 100 %을, display: inline-block에서 display: block의 요소를 변환 그 효과. .wrapper DIV 대신에 세 요소 주위에 상위 요소가없는 경우 jQuery 함수에서 body을 사용할 수도 있습니다.