1

私は現在、中央のラッパー（マージン0の自動で中央に配置）で戦っています。今、私は中央のラッパーが始まるまで左からコンテナを持ちたいと思っています。この与えられたマージン仕様でそれはまったく可能ですか？

私は本当にいくつかのヒントをいただければ幸いです！

フィドルも参照してください：http： //jsfiddle.net/TQhEa/1/

私が今持っているもの： ここに画像の説明を入力してください

私が欲しいもの：

ここに画像の説明を入力してください

私のコード：

<body>
    <div id="page-wrapper">
        <p><---- how can i cover the left side only with red without javascript but keeping the "0 auto margin?"

    </div>
</body>

私のCSS：

body, html{
        width:100%;
        height:100%;
        top:0;
        margin:0;
        background-image: url('http://www.art-wallpaper.net/Full-Size-HD-Wallpaper29/images/HD%20Widescreen%20Wallpaper%2059.jpg');
        background-repeat:no-repeat;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;

}
#page-wrapper{
    background-color:red;
    margin: 0 auto;
    width: 400px;
    top:0;
    margin-top:0;
    height:100%;
}
p {
    padding:0;
    margin:0;
    font-size:30px;
}
}
4

3 に答える 3

1

次のCSSでさらに1つのDIVを追加します。

#left_div {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #F00;
    display: table; /* note IE5-7 does not support this */
    z-index: 1;
}

現在の中央に配置されたDIV$('#page-wrapper')を変更して、より高いz-index値にします

于 2013-03-27T10:00:30.797 に答える
1

最も簡単な方法は、のbackground-colorと位置を設定することですbackground-image。このコードをチェックしてください： html

<div id="page-wrapper">content</div>

css

body {
  margin: 0;
  background: #c11 url(http://placekitten.com/1000/1000) 100% 0 no-repeat;
}
#page-wrapper {
  width: 400px;
  height: 1000px;
  background: #ccc;
  margin: 0 auto;
}
于 2013-03-27T10:05:59.880 に答える
0

position: absolute; width: 50%; height: 100%;プロパティのとで余分なdivを追加しますz-index: -1;

参照： http： //jsfiddle.net/skeurentjes/TQhEa/3/

于 2013-03-27T10:08:17.833 に答える