0

固定幅のメニューに加えて、外箱の幅が33％のdivboxを3列配置する必要があります。

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>

ヒントを事前に感謝します！

4

3 に答える 3

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/

于 2012-11-16T13:33:42.800 に答える
0

menu要素と.inner要素の両方を含むdivを作成します。また、1つの要素（おそらく中央の要素）の内側の幅が33.3％と33.4％でなければならないことを確認してください

于 2012-11-16T13:37:44.910 に答える
0

私は友人の助けを借りて解決策を見つけました：

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-16T13:49:57.833 に答える