我正在此网站上：http://www.justaddsolutions.com/SampleSite/
主要区域的宽度应为1024px，并且始终居中。但是，当浏览器窗口宽于1024px时，我的客户希望将黄色和红色条带扩展到浏览器窗口的相应边缘（左侧为黄色，右侧为红色）。
我想通过基于CSS的液体-固定-液体布局解决此问题，该方法的中心部分居中，侧面部分具有相同的液体宽度。但是我无法自行解决，也无法找到任何方法。
我确实在mathewjamestaylor液体布局网站上找到了Liquid-Fixed-Liquid Layout，但是当浏览器的窗口缩小为小尺寸时，它在IE8中中断。
然后，我想通过在标题中使用3列表并使用background-image和repeat-x设置td元素的样式来实现此目的，但这似乎在Chrome和Safari中效果不佳。
对此问题的任何帮助将不胜感激。
最佳答案
刚刚测试了一下
http://www.antiyes.com/test/4753259/
看一下html，由于颜色配置文件和图像中的东西，现在看起来有点cr脚，必须将它们更好地裁剪，但这显示了操作的基础。
<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header
{
width:100%;
height: 145px;
position:relative;
overflow:hidden;
text-align:center;
}
#logo
{
margin:auto;
position:relative;
z-index:5;
width:1024px;
height:99px;
background:transparent url(iea_logo_13Jan2011.png) no-repeat top center;
}
#red_stripe,#yellow_stripe
{
position:absolute;
left:0px;
right:0px;
z-index:4;
}
#red_stripe
{
left:50%;
height:31px;
top:6px;
background:transparent url(red_strip.png) repeat-x top left;
width:50%;
}
#yellow_stripe
{
height:32px;
top:60px;
width:50%;
background:transparent url(yellow_strip.png) repeat-x top left;
}
</style>
</head>
<body>
<div id="header">
<div id="red_stripe"></div>
<div id="yellow_stripe"></div>
<div id="logo"></div>
</div>
</body>
</html>
关于css - 液体-固定-液体布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4753259/