Question

这是我发生的事情。我的页面由#wrap div构成，其中的页面内容包含在#content div中，然后是div.Both css和html中的特殊内容块。我的问题是，有没有办法让我的屏幕宽度内容div跨越它所在的.wrap div的1140px宽度之外。我知道如果我可以简单地移动div但长话短说，我无法更改HTML，只有css。该网站也是一个响应式设计，所以它必须保持这种方式。解决方案任何人。

CSS

.wrap {
   margin: 0 auto;
   width: 1140px;
   }

.content {
   padding: 0;
   width: 100%;
   }

#screen-width-content {
   width: 100%;
   margin: 0 auto;
   }

HTML

<div class="wrap">
   <div class="content">
      my pages content
       <div id="screen-width-content">
         screen width content
       </div>
   </div>
</div>

Answer 1

编辑答案，似乎有效：

看一下这个例子，也许有帮助：http://jsfiddle.net/fR4mN/3/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
.wrap {
    margin:0 auto;
    background-color:orange;
    width:400px;
    height:700px;
    position:relative;
}
.inner {
    position:relative;
    width:100%;
    height:200px;
    background-color:gold;
}
.inner-outer {
    position:absolute;
    height:100px;
    background-color:green;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="wrap">
    <div class="inner">
        <div class="inner-outer"></div>
    </div>
    <div class="inner-outer"></div>
</div>
<script>
    $(document).ready(function(){
        setCheckSpaceDistance();
        $(window).resize(function() {
            setCheckSpaceDistance();
        });
    });
    function setCheckSpaceDistance() {
        var dist = $('.wrap').position().left;
        $('.inner-outer').css({
            'width' : dist+'px',
            'right' : '-'+dist+'px'
        });
    }
</script>
</body>
</html>

Answer 2

您可以将#screen-width-content的宽度更改为大于100％的任何值 - 具体取决于您在包装器之外的需要量。

与下面的评论一样，使用否定margin-left来相应地定位。

希望这有帮助！

响应网站的像素宽度内的css全屏宽度div

2 个答案: