我正在这个网站上工作:http://www.justaddsolutions.com/SampleSite/
主要区域的宽度为 1024 像素并且始终居中，这已实现。但是，当浏览器窗口宽度超过 1024 像素时，我的客户希望黄色和红色 strip 延伸到浏览器窗口的相关边缘(黄色向左，红色向右)。
我想用基于 CSS 的 Liquid - Fixed - Liquid Layout 来解决它，其中中心部分居中，侧面部分具有相等的液体宽度。但我无法自己弄清楚，也无法在任何地方找到如何去做。
我确实在 mathewjamestaylor 流式布局网站上找到了 Liquid-Fixed-Liquid Layout，但是当浏览器的窗口缩小到小尺寸时它在 IE8 中中断。
然后我想通过在标题中使用 3 列表来实现这一点，并使用 background-image 和 repeat-x 设置我的 td 元素的样式，但这在 Chrome 和 Safari 中似乎效果不佳。
如果您对此问题有任何帮助，我们将不胜感激。
最佳答案
刚测试过，
http://www.antiyes.com/test/4753259/
看看 html，它现在看起来有点糟糕，因为颜色配置文件和图像的东西，它们必须被更好地切割，但这显示了要做的事情的基础。
<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/