【发布时间】：2010-12-19 01:02:34
【问题描述】：
我正在制作一个必须适合整个屏幕的网站，无论屏幕大小如何。我目前正在使用表格来使用它，但遇到了问题。
网页分为3栏： 左列位于屏幕左侧，具有固定大小和背景。 右列位于屏幕右侧，具有固定大小和背景。 中间的列应该在他的相邻单元格之间拉伸，并且应该有一个与之一起拉伸的背景（仅水平方向）
这样，网页应始终与您用于查看网站的屏幕一样。
但是我的问题是中间单元格，图像不会重复，不知何故 css 代码：background-repeat:x-repeat; 不会使图像拉伸，当我将单元格宽度设置为 100% 时，它会干扰他的相邻单元格让它看起来一团糟。
我怎样才能做到这一点？
编辑
这是我正在使用的标记：
CSS：
#topleftcell
{
background-image:url(../images/Logo.png);
background-repeat:no-repeat;
width:300px;
}
#topmiddlecell
{
background-image:url(../images/header_fill.png);
background-repeat:repeat-x;
width:auto;
}
#toprightcell
{
background-image:url(../images/header_right.gif);
background-repeat:no-repeat;
width:16px;
}
HTML：
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr style=" width:100%;">
<td id="topleftcell"></td>
<td id="topmiddlecell"></td>
<td id="toprightcell"></td>
</tr>
</table>
</body>
【问题讨论】：
-
你应该使用 CSS，而不是表格来做到这一点。
-
CSS 和表格有很大的区别。我不明白你的意思。
-
您应该使用描述您的内容的标记（表格没有）并将其样式设置为您想要的样式。 hotdesign.com/seybold
-
这是
repeat-x不是x-repeat。但是，如果您没有指定background-repeat，则默认情况下它应该在两个方向上重复。让我们看一些标记。 （是的，只需 CSS 定位而没有表格，就可以轻松地完成三列中心液体这样简单的布局。） -
不，当您只想将页面分成列时，建议不要使用表格。使用表格来描述数据位之间的关系，其中每一行中的所有内容都彼此有共同点，每一列中的所有内容都彼此有共同点。例如，月历 - 列中的每个单元格代表一周中的同一天，每一行代表一年中的同一周。
标签： html css dynamic background html-table