靈活區域中的三個靈活（百分比）列

除了固定寬度的菜單外，我需要安排三個具有33％寬度外框的divboxes。靈活區域中的三個靈活（百分比）列

所以我想紅，黃，綠區beides橙色菜單，在#menu的寬度的任何情況下。

<div id="container"> 
    <div id="menu"> 
     menu 
    </div> 
    <div id="dialogbox"> 
     <div id="outer"> 
     <div class="inner" style="background-color:red;"> 
      col1 
     </div> 
     <div class="inner"> 
      col2 
     </div> 
     <div class="inner" style="background-color:green;"> 
      col3 
     </div> 
     </div> 
    </div> 
</div> 

 
#container{ 
    width:500px; 
    background-color:grey; 
    height:300px; 
} 
#menu{ 
    width:300px; 
    float:left; 
    height:100%; 
    background-color:orange; 
} 

#dialogbox{ 
    float:left; 
    height:100%; 
    width:100%; 
} 
#outer{  
    background-color:blue; 
    height:300px; 
    margin: 0 auto; 
    padding:0; 
    width:100%; 
} 

.inner{ 
    padding:0; 
    margin:0; 
    width:33%; 
    background-color:yellow; 
    height:100%; 
    float:left; 
}

預先感謝任何提示！

來源

2012-11-16 Matty

對於這種特定情況，您可以取消很多標記並使用display: table;和table-cell;。設置菜單的寬度，其他人將自動平均填充其餘部分。

HTML：

<div id="container"> 
    <div id="menu"> 
     menu 
    </div> 
    <div class="inner" style="background-color:red;"> 
      test 
    </div> 
    <div class="inner"> 
      test 
    </div> 
    <div class="inner" style="background-color:green;"> 
      test 
    </div> 
</div>

CSS：

#container{ 
    width:500px; 
    display: table; 
    height: 300px;  
} 
#menu{ 
    width: 100px; 
    background: #00f; 
    display: table-cell; 
} 

.inner{ 
    padding:0; 
    margin:0; 
    background-color:yellow; 
    height:100%; 
    display: table-cell;   
}

小提琴：http://jsfiddle.net/Kyle_Sevenoaks/uvw5c/5/

來源

2012-11-16 13:33:42 Kyle

我喜歡你走的路。但我有另一個要求：如果空間變小，我必須打破箱子（流體），這是不可能與表格單元格:) – Matty

是的，不幸的是你是對的。對於那些「需要填充剩餘空間」問題，這是一個很好的解決方案:) – Kyle

Iam完全和你在一起。也許你對我在幾分鐘前找到的解決方案感興趣，下面在這個網站:) – Matty

使含有菜單和.inner元素一個div。還要檢查的內該寬度必須是33.3％，而一個元素（也許是一個在中間）

來源

2012-11-16 13:37:44 LittleSweetSeas

33.4％，我發現了一個朋友的幫助下解決方案：

http://jsfiddle.net/t39yV/2/

其在#dialogbox上使用margin-left非常聰明;）

#container{ 
    width:100%; 
    background-color:grey; 
    height:300px; 
} 
#menu{ 
    width:100px; 
    float:left; 
    height:100%; 
    background-color:orange; 
} 

#dialogbox{ 
    margin-left:100px; 
    height:100%; 
} 
#outer{  
    background-color:blue; 
    height:300px; 
    margin: 0 auto; 
    padding:0; 
    width:100%; 
} 

.inner{ 
    padding:0; 
    margin:0; 
    width:33.3%; 
    background-color:yellow; 
    height:100%; 
    float:left; 
}

來源

2012-11-16 13:49:57 Matty

靈活區域中的三個靈活（百分比）列

回答

相關問題