0

レイアウトの問題があります:

.sectorMenuContentPane {
    float: left;
    width: 25%;
}

.sectorContentPane {
    float: left;
    width: 75%;
}

.sectorContentPaneRight {
    float: right;
    width: 32%;
}

同じCSSを使用した私のレイアウトは次のとおりです。 レイアウト

3 列のレイアウトではページはきれいに見えますが、2 列のレイアウトでは壊れています。sectorContentPaneRight が存在しない場合、sectorContentPane が私の図に従って領域を埋めるにはどうすればよいですか?

また、流体が必要かのように？jsfiddle の例を教えてもらえますか?

4

4 に答える 4

1

ご存知のように、CSS3 は多くのユーザーによって使用されています。

これは、CSS3 を使用して簡単に行うことができます。

これがあなたのやり方です..

.containerOfDivs{
   width:950px;
   display:-webkit-box;
   -webkit-box-flex: 1;
   -webkit-box-orient: horizontal;
}

.sectorMenuContentPane{
   width: 250px;
}

.sectorContentPane {
   display:-webkit-box;
   -webkit-box-flex: 1;
}

.sectorContentPaneRight {
    width: 250px;
}
于 2012-04-20T11:28:20.110 に答える
0

これがあなたが求めているようなものかどうかわかりませんか？

<div id="menu"></div>
<div id="right">
    <div id="slider"></div>
    <div id="content"></div>
</div>

<style>
    #menu { width:25%; height:400px; border:2px solid #000; float:left; margin-right:10px; }
    #slider, #content { width:48%; height:400px; border:2px solid #000; float:left; margin-right:10px; }
    #right { width:74%; height:400px; float:left; }
</style>
于 2012-04-20T08:59:13.253 に答える