div의 너비를 계산하십시오

Question

아래 예에서는 세 개의 행 (.row로 표시된 div)과 너비를 33 %로 설정하여 크기가 같고 전체 영역을 채 웁니다. 문제는 이러한 .row div가 동적으로 생성되고 때로는 세 div 대신 네 또는 두 div가 될 수 있다는 것입니다. 이 경우 폭을 설정하는 방법은? 예를 들어 theer가 두 div 인 경우 너비는 두 가지 모두에 대해 50 % 여야합니다.

<div class="membership-table"> 

     <div class="row"> 
      <div class="title"> 
       Personal One Year membership 
      </div>   
     </div> 


     <div class="row"> 
      <div class="title"> 
       Lifetime membership 
      </div>   
     </div> 


     <div class="row"> 
      <div class="title"> 
       Business One Month membership 
      </div>     
     </div> 

</div> 

.membership-table { text-align: center; } 

.membership-table .row { display: inline-block; margin: 0; padding: 0; width: 33%; } 

.membership-table .title { color: #c30000; font-size: 15px; font-weight: bold; } 

Answer 1

순수한 CSS 솔루션을 찾고 계시다면. css3 box-flex가 필요합니다 : http://designshack.co.uk/articles/css/farewell-floats-the-future-of-css-layout/

그러나 IE와 같은 구식 브라우저에서는 작동하지 않습니다.

다른 솔루션은 예를 들어 jQuery를 함께 할 것 :

$(".membership-table .row").css("width", 100/$(".membership-table .row").length + "%") 

이 행의 100/숫자로 각 행의 폭을 설정합니다.

데모 : http://jsfiddle.net/4zGxZ/1/

Answer 2

당신이 페이지에 jQuery를 사용할 수 있습니까? 그렇다면 :

내가 편집 한 분할 제로는 가능하지 않을 수 있기 때문에 (경우에 행 없음)

var divLength = $(".membership-table .row").length; 
if (divLength)>0 
{ 
    var divPercentage = 100/ divLength; 
    $('.membership-table .row').css('width',divPercentage+'%'); 
} 

Answer 3

가장 간단한 방법은 행을 계산하고 편집하기 위해 자바 스크립트를 사용하는 것 크기에 따라. 내가 jQuery를 사용하는 경향이 있으며, 다음과 같은 것을 사용합니다 :

var rows = $('.membership-table .row'); 
rows.width((100/rows.length)+'%'); 

는 서버 측이다 할 수있는 다른 방법 : 서버 측 스크립트는 행을 루프 때에 정의 된 클래스 명을 추가 CSS는 특정 너비가되어야합니다. PHP의 예를 들면 다음과 같습니다

$rows = [row1, row2, row3...]; 
$count = count($rows); 
foreach ($rows as $row) { 
    echo '<div class="row count'.$count.'">'; 
    echo ' <div class="title">'; 
    echo '  Personal One Year membership'; 
    echo ' </div>'; 
    echo '</div>'; 
} 

그런 다음 CSS에서 다음에 추가 :

.count1 { width:100%; } 
.count2 { width:50%; } 
.count3 { width:33%; } 
.count4 { width:25%; } 
.count5 { width:20%; } 

그리고 그렇게에, 당신은 당신이있을 수 있습니다 최대 열 수에 도달 할 때까지. '카운트'클래스가 너무 높지는 않도록하기 위해 몇 가지 온 전성 검사를해야하지만, 그 라인을 따라 무언가가 효과가있을 것입니다.

불행히도 CSS를 사용하여 수학을하는 방법은 없습니다. 그것은 CSS3 모듈 (http://www.w3.org/Style/CSS/specs#math)이지만, 주요 브라우저에서는 그다지 지원이나 추진력이 없습니다.