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

Question

我的所有内容都有一个 1000 像素宽的容器，垂直和水平居中。顶部 div 为 1600 像素，左边距为 -300 像素，以匹配其下方的“全出血”背景图像。我希望我的徽标与宽显示器上的图像对齐，但在窗口小于 1600 像素时推入。目前它溢出窗口。

注意：我通常会在容器 div 之外运行标题，但是整个东西是垂直居中的，这会导致居中，所以我想保持容器作为父容器。

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);
}

参考

Answer 2

不可能按照我想做的方式去做。一旦设置了宽度，就会断开与窗口或框架大小的任何连接，因此我必须在设置内容宽度之前将父元素分支。结果如下：

http://jsfiddle.net/vgK6s/5/