Question

我正在制作一个必须适合整个屏幕的网站，无论屏幕尺寸如何。我现在正在使用一张表来使用它，但我遇到了一个问题。

网页分为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>

Answer 1

左右单元格的固定宽度。中心单元格中的自动宽度。您可能需要在中心单元格中填充图像。

动态表格大小html

1 个答案: