2

これが私が行っていることです。私は自分のページを #wrap div で構造化し、その中のページ コンテンツを #content div でラップし、次にその div 内のコンテンツの特別なブロックを作成しました。以下の css と html の両方。私の質問は、screen-width-content 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-content100% より大きい値に変更することができます - ラッパーの外側にどれだけ必要かによって異なります。

以下のコメントにあるように、ネガティブmargin-leftを使用してそれに応じて配置します。

お役に立てれば！

于 2013-09-05T14:54:54.857 に答える