屏幕未最大化时垂直图像边框会更改对齐方式

Question

我有一些非常简单的 HTML 代码，其中有一些表格来组织各种文本或图像项目。除了我需要在屏幕的左侧和右侧放置垂直边框之外，一切正常。我可以使用拉伸的 2x2 像素图像来完成此操作。当用户最大化屏幕时，一切看起来都很棒。但是，当用户点击“向下恢复”时，边框保持在原位，但表格会被向下推，以便它们从边框结束的位置下方开始，即屏幕外。换句话说，边框和表格之间的关系对齐完全搞砸了。有谁知道如何使这种对齐方式在恢复时保持一致？我几乎是html和asp的新手，所以慢慢说。如果有更好的方法来实现这一点，我洗耳恭听。谢谢。

这是代码的相关部分：

<form id="form1" runat="server">
<asp:Image ID="LeftBorder" src="../Images/Border_Blue.jpg" runat="server" 
           WIDTH="15" HEIGHT="1000" BORDER="0" alt="Image Missing" align="left"/>

<asp:Image ID="RightBorder" src="../Images/Border_Blue.jpg" runat="server" 
           WIDTH="15" HEIGHT="1000" BORDER="0" alt="Image Missing" align="right" />

<table id="BannerTable" style="height: 100px">
        <tr>
            <td  width="934px">
            <img src="../Images/Header.jpg" 
                 alt="Image Missing" id="ImgBanner" align="left"/></td>
        </tr>
</table>

Answer 1

有一种更好的方法来完成您正在做的事情。

首先——你真的不应该使用表格。

话虽如此，您需要使用 div。

一个可以容纳所有东西的容器。

其中， a 代表左边框和右边框。使用CSS设置背景图片。重复-y就可以了。

您的桌子也需要进入 a 。

<div class="container">
     <div class="leftBorder"></div>
     <div>
        Your table
     </div>
     <div class="rightBorder"></div>
</div>

如果您遇到主容器未假设其子容器高度的问题，请查看 clearfix