0

わかりました。ページの中央に50％の幅のdivが必要なページをデザインしています。問題ありません。また、画面の上部に50％幅のヘッダーが必要です。問題ありません。最後に、そのヘッダーを固定divに入れて、スクロールしたときに画面の上部に表示されるようにする必要があります。ここで問題が発生します。どんなに頑張っても、その上部のdivを取得できないようです。おそらくそれは流動的な幅であり、ピクセルマージンを実際に指定できないために中央に配置されますか？

これが私が取り組んできたコードです（今のところ物事をシンプルに保ちます）...

<div id="wrapper">
    <div id="topwrapper">
        <div id="top">
            <div id="topleft"></div>
            <div id="topright"></div>
        </div>
    </div>
    <div id="table">
        Lorum Ipsum to fill here.
        <div id="left"></div>
        <div id="right"></div>
    </div>
</div>

そして私のCSS....。

#wrapper {
    overflow:         auto;
    position:         absolute;
    top:              0px;
    left:             0px;
    height:           100%;
    width:            100%;
    background-image: url('images/background.jpg');
}

#table {
    position:         relative;
    margin:           0 auto;
    width:            50%;
    background-image: url('images/midmiddle.png');
    padding:          50px;
    padding-top:      130px;
}

#topwrapper {
    position:    fixed;
    margin-left: -112px;
    left:        50%;
    width:       50%;
    z-index:     20;
    height:      169px;
}

#top {
    position:         relative;
    margin-left:      -8px;
    left:             -50%;
    width:            100%;
    background-image: url('images/topmiddle.png');
    z-index:          20;
    height:           169px;
    padding-left:     112px;
    padding-right:    112px;
}

#left {
    position:         absolute;
    margin-left:      -162px;
    top:              0px;
    width:            112px;
    height:           100%;
    background-image: url('images/midleft.png');
    z-index:          10;
}

#right {
    position:         absolute;
    right:            -112px;
    top:              0px;
    width:            112px;
    height:           100%;
    background-image: url('images/midright.png');
    z-index:          10;
}

#topleft {
    position:         absolute;
    margin-left:      -168px;
    top:              0px;
    width:            112px;
    height:           169px;
    background-image: url('images/topleft.png');
    z-index:          10;
}

#topright {
    position:         absolute;
    right:            -56px;
    top:              0px;
    width:            112px;
    height:           169px;
    background-image: url('images/topright.png');
    z-index:          10;
}

だから私はメインラッパーを100％幅と高さでたくさん取っています、左上、右上、左と右のdivはメインdiv内にあり、ボックスの側面を繰り返していますが、上部は私が立ち往生している場所です。

私が投稿したコードは実際に機能しますが、非常に複雑な回避策であることがわかるように、ほとんどのマージンは私の側面の画像の寸法に関係していますが、＃top-8pxがそれを回避するための唯一の方法です-そこにより簡単な方法である必要がありますか？！

助けてくれてありがとう:)

入力に感謝します-コードのフォーマットについて申し訳ありませんが、CSSの前に4つのスペースを入れましたが、行ではなくリストでそれが好きだと思います-申し訳ありませんが、古い習慣....！

トップラッパーに左右25％、上部に幅100％、マージン-120pxを配置することで、ある程度機能するようになりました。画像の幅は112pxです）元のコード（-8pxのマージン左）にも見られるように、どこかで8pxを追加しました。それが方程式にどのように含まれるかについて非常に混乱しています....しかし、それは機能しています！

私はそのフィドルを見ていきますが、私がよく知っているものではないので、何か新しいことを学ぶのを楽しみにしています:)

皆さんの助けに感謝します:)

4

3 に答える 3

0

これを行うには、固定ラッパーを作成してから、表示されている要素を子として配置します。http://jsfiddle.net/LDVmu/を参照してください

つまり、HTMLは

<div id="top"><div>I am at the top!</div></div>

<div>blah blah blah</div>

そして私が使用したCSSは

#top {position: fixed; width: 100%;}

#top div {width: 50%; margin: auto; border: 1px solid red; background: white;}

これが別のネストされたdivであり、セマンティック性が低いことはわかっていますが、これが機能する唯一の方法だと思います。絶対位置と固定位置、および左/右= 0のセンタリングト​​リックは、明示的なピクセル幅でのみ機能するようです。

于 2012-05-03T18:42:12.503 に答える
0

#wrapper のマージンを auto に設定してみてはどうでしょうか。おそらく問題は、ラッパーが固定されていないことです。そのため、テーブルではなく #wrapper が移動している可能性があります。

于 2012-05-03T18:04:19.533 に答える
0

あなたの質問から、それが完全に中央揃えに失敗しているのか（つまり、ページの左側に表示されているのか）、それともわずかに中央からずれているのか、それともほぼ完全に右にずれているのかわかりません。

#topwrapper幅が 50% で、左も 50% です。つまり、ページの途中から始まり、ページの半分 (右半分) を占めます。その負のマージンだけが、それを正しい方向に押し戻します。leftマイナスのマージンの代わりに、 25%に減らします。そうすれば、負のポジショニング/マージンはもう必要ありません#top。

この後も、わずかに中心からずれている可能性があります。もしそうなら、おそらく に表示されるスクロールバーが原因です#wrapper。#tableそれらを許可するように調整しますが、そうで#topwrapperはありません（固定位置であるため、何htmlおよび/または何をしているかに注意するだけですbody）。解決策 - 少なくとも Chrome と Firefox の場合、他の人ではテストしていません - スクロールバーを常にオンにしhtml、決してオンにしないようにbodyすること#wrapperです。

inに変更heightし、これを追加します。min-height#wrapper

html {
    margin:            0;
    height:            100%;
    overflow-y:        scroll;
}
body {
    margin:            0;
    min-height:        100%;
}

いくつかのメモ...

  1. #wrapperビューポートの高さを 100% にし たい場合は、 body(そしてほとんどのブラウザでhtml) それも必要です。
  2. #table上部のパディングは 130px ですが#topwrapper、高さは 169px なので、Lorem Ipsum は下に隠れます。padding-top を 180px に増やしました。
于 2015-11-12T11:04:15.827 に答える