html - 如何将子元素推送到比窗口宽的 div 中？

Question

我有一个 1000 像素宽且垂直和水平居中的容器来容纳我的所有内容。顶部 div 为 1600px，左边距为 -300px，以匹配其下方的“全出血”背景图像。我希望我的 Logo 在宽屏显示器上与图像保持一致，但在窗口小于 1600 像素时插入。目前它溢出了窗口。

注意:我通常会在容器 div 外部运行 header ，但整个东西都是垂直居中的，这会打乱居中，所以我想将容器保留为父级。

http://jsfiddle.net/vgK6s/3/

Answer 1

CSS3 通过使用@media 标签拥有自己的 If 语句类型

Do CSS for larger than 1600px

@media screen and (max-width: 1599px) {
    replace CSS with new css if the screen is less than 1600px
}

对于旧版浏览器，您可以使用 Jquery 复制它

//first bind the resize event
$(window).bind("resize", methodToFixLayout);

function methodToFixLayout( e ) {
var winHeight = $(window).height();
var winWidth = $(window).width();
//adjust elements css etc.....
//$("#someDiv").css('someProperty',someValue based on winHeight and winWidth);
}

references