灵活区域中的三个灵活(百分比)列

Question

除了固定宽度的菜单外，我需要安排三列外框宽度为 33% 的divbox。

http://jsfiddle.net/uvw5c/1/

所以我想要红色、黄色、绿色区域与橙色菜单相吻合，在任何宽度为 #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;
}
​

​

提前感谢您的任何提示！

Answer 1

对于这种特定情况，您可以取消很多标记并使用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/

Answer 2

创建一个包含菜单和 .inner 元素的div。还要检查一个元素（可能是中间的那个）的内部宽度必须为 33.3% 和 33.4%

Answer 3

我在朋友的帮助下找到了解决方案：

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

在 #dialogbox ;) 上使用左边距非常聪明

#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;
}