2

CSSのヘルプが必要です。

この構造を作成したい：

中央固定、960px のメニューを作成したい。-それは非常に簡単です..

メニューと同じ行に、2 つの div を作成したいと思います。 .

キーを使用してあなたを説明しようとします。

| | left_div | | | _fixed_centered_960px_div| |__right_div |

左右の div は流動的で、画面の解像度によって異なります。

誰でも私を助けることができますか？

ありがとう。

4

3 に答える 3

1

失敗したアイデア： http： //jsfiddle.net/kC35U/、http：//jsfiddle.net/kC35U/1/

最終的な解決策：

http://jsfiddle.net/kC35U/4/

追加のマークアップを含むHTML：

<div id="bar">
  <div class="left"><div>LEFT</div></div>
  <div class="right"><div>RIGHT</div></div>
  <div class="center">CENTER</div>
</div>
<div>
  Footer
</div>​

CSS：

Center div、固定幅、centered、特別なものはありません：

.center {
    width: 500px;
    margin: 0 auto;
}

次に、左側/右側に2つの50％幅のラッパーdivを作成します。高さを0に設定して、3つのdivの上部すべてを適切に配置します。

.left {
    width: 50%;
    margin-right: auto;
    height: 0;
}

.right {
    width: 50%;
    margin-left: auto;
    height: 0;
}

内部divは親を埋めますが、中央のdivの半分の幅を切り取ります。

.left > div {
    margin-right: 250px;
}

.right > div {
    margin-left: 250px;
}

3つの列の下に何かを配置したい場合は、いくつかの奇妙なトリックを使用する必要があります。

.left:after, .right:after {
  content: '';
  float: left;
  height: 0;
}

#bar + * {
    clear: both;
}​
于 2012-07-19T00:08:35.117 に答える
1

このようなcssを使用できます

#fixed{
    margin:0 px auto;
    width: 960px;
}    
#container {
    padding-left: 205px;      /* LC fullwidth */
    padding-right: 205px;     /* RC fullwidth + CC padding */
    background:#FFFF99;
}

 #container .column {
    position: relative;
        float: left;
    }

    #center {
        padding: 20px 0px 20px 0px;       /* CC padding */
        width: 100%;
        height:auto;
    }
    #content{padding:10px;height:auto;border-right:1px dashed;color:#fed88e;}

    #right{
        width: 205px;             /* RC width */
        padding: 0px;          /* RC padding */
        margin-right: -100%;
    }
#left{
 width : 205px;
padding: 0px
margin-left:-100%;

}

そしてhtmlのような

<div id="fixed">
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
</div>
于 2012-07-19T03:20:39.127 に答える
0

これを使用して、必要なものを取得できると確信しています：

聖杯 3 列の液体レイアウト

追加するだけです：

#col1 { margin: 0 auto; width: 960px; }

追加の調整が必要になる場合があります。

于 2012-07-18T23:55:30.300 に答える