div의 동적 수를 컨테이너의 모든 공간을 동일하게 차지하게하려면 어떻게해야합니까?

동적 인 div 수의 컨테이너가 있습니다. 나는 각 div가 동일한 너비를 갖도록 줄 바꿈없이 모든 div를 한 줄에 맞추기를 원합니다. div 수와 화면 크기가 모두 변경 될 수 있습니다. 나는 CSS 솔루션을 기대하고있다.div의 동적 수를 컨테이너의 모든 공간을 동일하게 차지하게하려면 어떻게해야합니까?

this fiddle에는 회색 상자에 3 개의 동일한 크기의 빨간색, 녹색 및 파란색 직사각형이 있어야합니다.

나는 이것을 아무렇지 않게 사용해 보았습니다.

#container { 
    width: 400px; 
    border: 2px solid #CCCCCC; 
} 

#container div { 
    width: auto; 
    display: inline-block; 
    height: 200px; 
}

도움을 주셔서 감사합니다.

출처

2013-08-28 anarchocurious

나는 이것이

...

항상 확산됩니다 동등하게 .. – chris

JS없이 작동하지 않습니다 생각 .. 나는 그것을 할 수있다. –

@ 크리스에 넣어 –

답변

html 분배기가 테이블 세트처럼 작동하도록합니다. 테이블 분할 자 (<td>)는 기본적으로 균등하게 분산됩니다.

HTML

<div class="table-div" style="width:100%"> 
    <div class="tr-div"> 
     <div class="td-div">td-div 1a</div> 
     <div class="td-div">td-div 2a</div> 
     <div class="td-div">td-div 3a</div> 
     <div class="td-div">td-div 3b</div> 
    </div> 
    <div class="tr-div"> 
     <div class="td-div">td-div 1b</div> 
     <div class="td-div">td-div 2b</div> 
     <div class="td-div">td-div 3b</div> 
     <div class="td-div">td-div 3b</div> 
    </div> 
</div>

CSS

.table-div{display:table} /* you can add table-layout:fixed; to suit your needs ([Yoshi][1])*/ 
.tr-div{display:table-row} 
.td-div{display:table-cell;border:1px solid silver}

내가 아무리에게 올바르게 컨테이너의 크기를 이해한다면 http://jsfiddle.net/sPm9M/

출처

2013-08-28 19:58:50

이것이 최선의 해결책입니다. 답에 하나의 행만 있으면됩니다. – Vector

좋은 답변을 +1하고 실제 테이블을 만들지 않았습니다. – Tricky12

'.tabel-div '에'table-layout : fixed;'가 필요하다고 생각합니다. – Yoshi

를 참조하십시오, 당신은 모두 같은 폭으로 사업부를 싶습니다 그리고 그들은 모든 용기를 완성합니까?

이 경우 간단합니다. 각 div의 오른쪽 비율 너비를 얻기 위해 컨테이너에 포함 할 div 수만큼 100을 나눕니다. 여기

: http://jsfiddle.net/XnC6k/3/

출처

2013-08-28 20:15:37

div의 변경 횟수가 있기 때문에 매번 JavaScript로 그 값을 다시 계산해야한다는 것을 이해합니다. 나는 순수하게 CSS 솔루션을 원했다. – anarchocurious

+1 실제로 Milche Patern의 솔루션은 정확합니다. 카운터의 "카운터 증가"카운터를 사용하려고했으나 div의 수로 너비를 나누기위한 총 카운터를 초기화하는 것은 불가능했습니다. http://jsfiddle.net/XnC6k/10/ –

div의 동적 수를 컨테이너의 모든 공간을 동일하게 차지하게하려면 어떻게해야합니까?

답변

관련 문제