html - 灵活区域中的三个灵活（百分比）列

Question

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

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

​</p>

提前感谢您的任何提示！

Answer 1

对于这种特定情况，您可以取消大量标记并使用display: table;and 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 上使用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;
}