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

設計上の理由から、テーブルには制限があります（これは私の意見です:-)）。コードに固執する場合は、このレイアウトを使用できます。

画像の最小幅は1010px（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>

また、960.gsのカスタムグリッドCSSジェネレーターをクラウドで試してみてください

于 2012-10-07T18:35:39.167 に答える