有没有办法我可以覆盖保证金左边尽管保证金：0自动与CSS？

时间：2013-03-27 09:57:21

标签： html css

我正在使用居中的包装器（以边距0自动为中心）进行战斗。现在我想从左边开始有一个容器，直到居中的包装器开始。这个给定的保证金规格是否可行？

我真的很感激一些提示！

另见小提琴： http://jsfiddle.net/TQhEa/1/

我现在拥有的： enter image description here

我想要的是：

enter image description here

我的代码：

<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;
}
}

3 个答案:

答案 0 :(得分：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值

答案 1 :(得分：1)

最简单的方法是设置background-color和background-image的位置。查看this piece of code： 的 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;
}

答案 2 :(得分：0)

使用属性position: absolute; width: 50%; height: 100%;和z-index: -1;

添加额外的div

请参阅：http://jsfiddle.net/skeurentjes/TQhEa/3/

相关问题
最新问题