内层DIV宽度超过外层DIV宽度，居中且通栏显示内层div问题？

Question

制作网页的时候发现当把主体宽度设置为960px之后，想要实现一个1920px宽度的通栏效果（通栏里面内容可以是图片或者文字视频等），这个效果又是在主体宽度960px之内的，怎么突破这个实现且兼容浏览器呢？
效果如图，不知道怎么写，有没有高手可以指导下思路，最好是能有代码。谢谢中。

Answer 1

这个问题和我之前修改过的一个项目的需求一样，起初不考虑宽屏状态，后续添加宽屏下的效果，不过好在这个项目前期使用了960的栅格化布局，后期改动起来较为方便，具体的步骤如下：

解决方案：

1.假设你之前的样式文件是old.css，那么你现在要定义一个宽屏的新样式表wideScreen.css，此样式的作用是针对old.css布局的一些宽度重置，利用CSS优先级的特性覆盖之前的代码，部分如下：

old.css

.home-wrapper{
    margin:0 auto;
    width:960px;
}
.ui-grid-5 {
    width:190px;
}
.ui-grid-20 {
    width: 760px;
}

wideScreen.css

.home-wrapper {
    margin: 0 auto;
    width: 1920px;
}
.ui-grid-5 {
    width: 530px;
}
.ui-grid-20 {
    width: 1380px;
}

按照这种方式把所有需要重置的宽度，在wideScreen.css都需要按照1920px重新定义覆盖。

2.在一个统一的config.js配置文件，增加了一个全局变量，( 注意代码规范，以下用于演示 )

var openWide = 1 ; //宽屏效果的控制按钮 0:关闭，1:打开

这个设置是为了防止功能回退，可自由选择退回到原始960宽度版本，不会对之前的代码有任何影响。

3.然后在一个通用的util.js工具文件，写一个用于异步动态加载CSS的方法，代码入下：

//异步动态加载CSS
$.extend({
     includePath: '',
     include: function(file) {
        var files = typeof file == "string" ? [file]:file;
        for (var i = 0; i < files.length; i++) {
            var name = files[i].replace(/^\s|\s$/g, "");
            var att = name.split('.');
            var ext = att[att.length - 1].toLowerCase();
            var isCSS = ext == "css";
            var tag = isCSS ? "link" : "script";
            var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";
            var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";
            if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + "></" + tag + ">");
        }
   }
});

4. 在你的项目的common.js通用的JS文件中，写入宽屏效果的逻辑代码：

// 宽屏效果
// openWide是否打开宽屏效果，定义在config.js
if(openWide==1){
    if(screen.width >= 1920){ 
        //使用方法
        $.includePath = '../theme/'; 
        $.include(['widesSreen.css']);
    }
}

总结

至此这个解决方案的流程都结束了，示例代码只是为了演示逻辑和解决方法，使用时请再次验证，也注意命名和编码规范，现在你把config.js中的变量设置为openWide=1，就可以看到你网站的宽屏效果了

Answer 2

建议：

<div class="main">
<div class="1920px"></div>
<div class="960px"></div>
</div>

然后用CSS调整位置即可

Answer 3

图片position定位

Answer 4

1.主体不能设置overflow：hidden，并且设置主体position:relative
2.设置通知框：position:absolute;top:50%;margin-top:-通知框高度/2