Question

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

所以我希望红色，黄色，绿色区域在橙色菜单旁边，在任何宽度为#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上使用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;
}

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

3 个答案: