CSS가 작동하도록 동적 컬럼

Question

참고 규칙 1 개 세트가 존재하는 경우 1, 2, 3 열의 배열에 기초 : display:table-cell; 일부 상황의 요소

패딩없는 상부 또는 여백 공간이 있고 border-collapse:collapse;도 수정되지 않습니다. vertical-align:text-top;도 사용해야합니다. Another users question on the subject.

원래의 질문에

나는 PHP로 내 템플릿 파일을 작성하고 1, 2 또는 3 열이있는 경우에 따라 열에 대한 CSS 규칙의 3 개 가지 세트를 사용하고있다. 내가 1 세트의 규칙을 얻을 수 있는지 궁금해하는 Im. PHP는 아이디어

if($this->_data['left']!=NULL) 
    echo "<div id='left'>{$this->left}</div>"; 
if($this->_data['right']!=NULL) 
    echo "<div id='right'>{$this->right}</div>"; 
echo "<div id='content'>{$this->main}</div>"; 

#left 및 #right의

엿볼 폭과 왼쪽과 오른쪽에 고정 될 것이다. #main은 가운데에 있고 나머지는 #wrappers 너비까지 사용합니다. 따라서 #right이 없으면 #main은 #right이 있었던 공간을 채 웁니다.

<!-- 3 column --> 
<div id='container'> 
    <div id='left'></div> 
    <div id='main'></div> 
    <div id='right'></div> 
</div> 

<!-- 2 column --> 
<div id='container'> 
    <div id='left'></div> 
    <div id='main'></div> 
</div> 
<!-- or --> 
<div id='container'> 
    <div id='main'></div> 
    <div id='right'></div> 
</div> 

<!-- 1 column --> 
<div id='container'> 
    <div id='main'></div> 
</div> 

Answer 1

display : table 속성을 사용할 수 있습니다. 다음과 같이 쓰기 :

#container{ 
    display:table; 
    width:100%; 
} 
#container > div{ 
    display:table-cell; 
    height:50px; 
} 
#left, #right{ 
    width:100px; 
    background:red; 
} 
#right{ 
    background:green; 
} 
#main{ 
    background:blue; 
} 

확인이 http://jsfiddle.net/HXaPR/