Question

我正致力于将设计好的网页布局变为现实。设计可能有点不寻常，所以我不确定是否有可能实现。基本上，我将有一个900px的固定宽度内容框。内容框将位于页面正文的中间。我想在页面中添加两个垂直列，其中包含淡入淡出的png。左边的png将从左边的纯黑色面向右边的透明面。右边的png会从右边的纯黑色渐变到左边的透明面。这两个png的宽度分别为250px。一旦定位完毕，布局应该看起来像是在左右边缘上褪色的纸张。但是，诀窍在于重新调整页面大小。我想确保当屏幕宽度小于1500px时（两个列都部分位于屏幕之外），列不会在内容框下滑动，而只是缩小到零。请考虑下面的图片。黑色轮廓是屏幕，蓝色是内容，红色是列。当屏幕宽度为1500px时，列和内容对齐良好。幻觉（没有边界）是一个褪色的形象。！[屏幕宽度为1500px时的布局] [1]当屏幕拉伸时，列会分开并保持褪色的外观。！[屏幕宽度超过1500px时的布局] [2]最后，当屏幕宽度小于1500px时，列会缩小，但每列的背景图像会以不会破坏褪色外观的方式连接（例如，左列缩小并且黑色靠近内容框的左侧是不正确的。！[屏幕宽度小于1500px时的布局] [3]

**无法发布图片:(

Answer 1

最好是混合使用jquery和css3。

Jquery会让你保持Main内容居中并且两边都有一个div。虽然CSS3允许你在两侧都有一个渐变而不需要图像。唯一不足的是，如果浏览器不符合CSS3，则不会显示渐变。只有一个不符合要求的是IE8及更早版本。但有些插件会有所帮助（Modenizr和IE Chrome Tab）

Jquery的

$(document).ready(function(){
 windowWidth = $(window).width();
 divWidth = (windowWidth - 900) / 2;
 $('#left_container').css({width: divWidth+"px"});
 $('#right_container').css({width: divWidth+"px"});
});

$(window).resize(function() {
 windowWidth = $(window).width();
 divWidth = (windowWidth - 900) / 2;
 $('#left_container').css({width: divWidth+"px"});
 $('#right_container').css({width: divWidth+"px"});
});

左Div CSS

background-image: linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -o-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -moz-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -webkit-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -ms-linear-gradient(90 , #FFFFFF 0%, #000000 52%);

background-image: -webkit-gradient(
 linear,
 90 90,
 right 90,
 color-stop(0, #FFFFFF),
 color-stop(0.52, #000000)
);

Right Div CSS

background-image: linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -o-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -moz-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -webkit-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -ms-linear-gradient(270 , #FFFFFF 0%, #000000 52%);

background-image: -webkit-gradient(
 linear,
 270 270,
 left 270,
 color-stop(0, #FFFFFF),
 color-stop(0.52, #000000)
);

带有褪色边框的动态布局

1 个答案: