2

这就是我正在做的事情。我的页面结构是#wrap div，其中的页面内容包含在#content div中，然后是该div中的特殊内容块。下面的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>
4

2 回答 2

3

编辑了答案，似乎有效：

看看这个例子，也许它有帮助：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>
于 2013-09-05T15:00:49.507 回答
0

您可以将宽度更改为#screen-width-content大于 100% 的任何值 - 取决于您希望它在包装器之外的程度。

就像下面的评论所说，使用否定margin-left来相应地定位它。

希望这可以帮助！

于 2013-09-05T14:54:54.857 回答