2012-04-19 3 views
0

내가 좋아하는 (내부 2-4 DIV)와 래퍼 (컨테이너)를 작성해야 너비가 같기 때문에 래퍼가 300px이고 내부 div가 두 개인 경우 (150px 한 번) 등자동으로 너비를 설정하는 방법은 무엇입니까? 그들이 있어야하기 때문에 내가 내부 div에 대한 폭을 설정 할 수 없다는 것입니다</p> <pre><code><div class="wrapper"> <div></div> <div></div> <div></div> <div></div> </div> </code></pre> <p>내 문제 :

너비는 .css 파일로 설정할 수 없습니다. 왜냐하면 2에서 4divs.

질문은 다음과 같습니다. 전체 래퍼 너비를 얻으려면 내부 div를 자동 크기 조정할 수 있습니까?

감사합니다.

답변

5

당신은이에 대한 display:table 속성을 사용할 수 있습니다 :

.wrapper{ 
    width:300px; 
    border:2px solid green; 
    display:table; 
} 
.wrapper > div{ 
    display:table-cell; 
    border:1px solid red; 
    height:50px; 
} 

을 이것을 확인하십시오 http://jsfiddle.net/7E9Nj/

1

백분율을 사용했을 가능성이 있습니까? 2 개의 div가있는 경우 각 div에 style="width:50%"을 넣으십시오. 4 개의 div가있는 경우 각 div에 style="width:25%"을 넣으십시오.

+0

가 그래 난 그것을 할 수 없지만, 그것 없이는 불가능하다 할 수 있습니까? 내 말은 ... 그들은 %를 설정하지 않고 자동으로 자동 크기를 조정할 수 있습니까? – Dail

0

당신은에 %를 시도 할 수 있습니다 당신의 내면 사업부의

예를 들어, 당신은 다음과 같이 할 수 :

<div id="wrapper"> 
    <div style="width:25%"></div> 
    <div style="width:25%"></div> 
    <div style="width:25%"></div> 
    <div style="width:25%"></div> 
</div> 
0

jquery를 시도하십시오. 이것은 효과가있다.

$(document).ready(function(){ 
var divWidth = parseInt($('.wrapper').css('width')); 
var divSizes = parseInt($('.wrapper >div').size()); 
var divWidth = divWidth/divSizes; 

$('.wrapper >div').each(function(){ 
$(this).css('width', divWidth+'px') 
}) 
}) 
0

이 단순히

#wrapper > div { 
    float:left; 
    width:25%; 
}