3

これを行う方法を理解するのに苦労しています。サイトが中央に配置されるようにラッパーが必要ですが、ページの幅を広げたりスクロールバーを追加したりせずに、ヘッダー要素の 1 つをページの右端まで伸ばす必要があります。

こちらをご覧ください: http://i49.tinypic.com/6rkaxc.jpg (新しいポスターのため、画像を追加できません)

青いアウトラインは中央のラッパーを表し、オレンジ色のボックスは、ページの右側に合わせようとしているヘッダー div です。100% の幅を使用して動作するようになりましたが、親と同じ幅になっているため、水平方向のページ スクロールが作成されます。解像度が高いユーザー向けに拡張して、常に右側にぴったりと収まるようにしたい. これが理にかなっていることを願っています。

私のコードは次のようになります...

<body>
<div id="wrapper">
   <div id="header">
   </div>

   <div id="left">
   </div>

   <div id="right">
   </div>
</div>
</body>

CSS:

div#wrapper {
 margin: 0 auto;
 width: 1020px;
 position: relative;
}

div#header {
 height: 150px;
 position: absolute;
 left: 510px;
 width: 100%;
}

div#left {
 width: 510px;
 float: left;
}

div#right {
 width: 100%;
 float: left;
}

私はこのことにかなり慣れていないので、ここでエラーや悪い習慣に気づいたら、指摘してください! 助けてくれてありがとう！:)

4

2 に答える 2

0

コンテンツの幅を固定したいので、戦略は、左右両方のコンテンツ用のコンテナーを用意することです。width: 100%これにより、スクロールバーなしで最後まで拡張されるヘッダーに使用できます。次に、適切なコンテナを基準にしてヘッダーを作成します。これがあなたが遊ぶことができるjsfiddleです。

jsfiddleウィンドウに収まるように、幅を小さくしたことに注意してください。

HTML：

<body>
    <div id="wrapper">
       <div id="leftContainer">
           <div id="left">
               This is left
           </div>
       </div>
       <div id="rightContainer">              
           <div id="header">
              This is a header
           </div>   
           <div id="right">
              This is right
           </div>        
       </div>
   </div>
</body>          ​

CSS：

div#wrapper {
 text-align: center;
 width: 100%;
 position: relative;
 white-space: nowrap;    
 overflow-x: scroll;  
}

div#header {
 z-index: 1000;
 height: 150px;
 position: absolute;
 left: 0;
 width: 100%;
 background: green;    
}

div#leftContainer {
 float: left;
 width: 50%;
 height: 500px;
 display: inline-block; 
}

div#left {
 float: right;
 width: 260px;
 height: 300px;
 background-color: purple;
}

div#rightContainer {
 position: relative;
 float: right;
 width: 50%;
 height: 500px;    
 display: inline-block;  
}

div#right {
 width: 260px;
 height: 300px;
 background-color: yellow;
}
于 2012-10-23T23:02:23.130 に答える
0

これを試してみてください。ラッパーの幅を 80% に変更しました。大丈夫かどうかわかりません。しかし、ページを拡大するときはうまく機能します。ヘッダーをラッパーの外に移動し、わかりやすくするために背景色も追加しました。

注 1: 右 DIV の margin-top は、ヘッダー DIV の高さと同じサイズです。

HTML

<div id="outerWrapper">
    <div id="header">
            Header
    </div>
    <div id="wrapper">


        <div id="left">
            Left
        </div>

        <div id="right">
            Right
        </div>
    </div>
</div>

CSS

div#wrapper {
 margin: 0 auto;
 width: 80%;
 height: 100%;
 position: relative;
 background-color: #CCCCCC;
}

div#header {
 height: 150px;
 float: right;
 position: absolute; 
 left: 50%;
 width: 50%;
 background-color: yellow;
}

div#left {
 width: 50%;
 height: 100%;
 float: left;
 background-color: red;
}

div#right {
 width: 50%;
 height: 100%;
 float: left;
 margin-top: 150px;
 background-color: blue;
}

お役に立てれば。

于 2012-10-23T23:41:11.210 に答える