1

我有一个有 3 列的表。我使用中间列作为内容，另外 2 个有一个图像作为边框，如下所示：

 border -->   ||HEADER  ||  <--- border
              ||NAV     || 
              ||CONTENT ||
              ||        ||
              ||FOOTER  ||

我必须使用固定位置，以便在页面滚动时边框不会移动，这是我的代码：

 <td style="background-image:url(images/vertical.jpg); width:10px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed;"></td>

问题是，当使用固定位置时，我的边框图像会在主要内容内移动，这会弄乱我的布局。奇怪的是，这只发生在左 td 上。我的主要内容的固定宽度为 990px​​。

有任何想法吗？

显示问题的屏幕截图：

http://imageshack.us/a/img571/3016/tableg.jpg

4

1 回答 1

1

出于设计目的，表格有限制（这只是我的意见:-)）。如果你坚持你的代码，那么你可以使用这个布局。

您的图像的最小宽度应为 1010 像素（10 像素边框，990 像素内容，10 像素边框）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
    min-width: 1010px;
    background:url(images/vertical.jpg) top center repeat-y;
    margin:0;
}
.wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 990px;
}
.contenttable{
    width: 990px;
    margin:0;
    padding:0;
}
</style>
</head>
<body>
    <div class="wrapper">
    <table class="contenttable">
        <tr>
        <td>content goes here</td>
        <tr>
    </table>
    </div>
</body>
</html>

您也可以尝试使用960.gs的自定义 Grid CSS 生成器

于 2012-10-07T18:35:39.167 回答