Question

我有一个有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。我的主要内容固定宽度为990像素。

有什么想法吗？

显示问题的屏幕截图：

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

Answer 1

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

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

<!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>

您也可以尝试custom Grid CSS generator

中的960.gs

固定位置使元素移动

1 个答案: