html - 当我调整窗口菜单大小时不保持固定

Question

每当我调整窗口大小时，我的菜单都无法保持固定，我的菜单不会保持固定，而是一直向下向左移动。我希望我所有的文字、图片和菜单都保持固定，但可以在一定程度上移动，之后它应该像其他网站一样可以滚动。我正在分享滚动网页时发生的屏幕截图:

This is how when it is maximised which is fine

This is when it is minimised all the text, menu buttons moves but doesn't stay where they are.

我正在为您分享脚本:

 .auto-style19 {
           color: Highlight;
           font-size: 18pt;
           position: relative;
           width:672px;
           display: inline-block;
           float: right;
           margin-right: 10% auto;
           font-family: 'Times New Roman', Times, serif;
           top: 49px;
           min-height: 196px;
           margin-top: 0px;
           left: -21px;
           height:auto;
       }
       .auto-style26 {
           position:relative;
           min-width: 80%;
           width:auto;
           top: 0px;
           left: 0px;
           min-height: 505px;
           overflow:hidden;
           height:auto;
           display:block;
       }
        .auto-style34 {
           position: absolute;
           left: 64px;
           float: left;
           width: 500px;
           top: 14px;
       }
        .auto-style36 {
           width: 677px;
       }

  <div style="margin-top:40px;margin:auto;" class="auto-style26">

       <div style="display:inline-block;margin-top:50px;margin-right:20px;" class="auto-style34" >
      <asp:Image ID="Image1" runat="server" height="300px" width="200px" CssClass="img1"/>
      &nbsp; &nbsp;
      <asp:Image ID="Image2" runat="server" height="300px" width="200px" />
</div>
       <div class="auto-style19" >
           <table class="auto-style36">
          <tr><td class="auto-style28">  <asp:Label ID="Label2" runat="server" ForeColor="Highlight" style="text-transform:capitalize;" Font-Size="14pt" Text="Address: " Font-Bold="True"></asp:Label></td>
               <td class="auto-style29"> <asp:Label ID="LabelAddress" runat="server" ForeColor="White" style="text-transform:capitalize;" Font-Size="13pt" ></asp:Label></td>
              <td rowspan:3 class="auto-style27"><ul id="edit"><li> <a id="edit1" href="#" runat="server"  >Edit Info</a>
                       <ul>
                           <li><asp:HyperLink ID="HyperLink1" runat="server"  Font-Size="16pt" Font-Underline="false" NavigateUrl="~/EditPic1.aspx">Edit Profile Pic 1</asp:HyperLink></li>
                           <li><asp:HyperLink ID="HyperLink2" runat="server"  Font-Size="16pt" Font-Underline="false" NavigateUrl="~/EditPic2.aspx">Edit Profile Pic 2</asp:HyperLink></li>
                           <li><asp:HyperLink ID="HyperLink3" runat="server"  Font-Size="16pt" Font-Underline="false" NavigateUrl="~/EditAddress.aspx">Edit Address and Phone</asp:HyperLink></li>
                           <li> <asp:HyperLink ID="HyperLink4" runat="server"  Font-Size="16pt" Font-Underline="false" NavigateUrl="~/Change Password.aspx">Change Password</asp:HyperLink></li>
                      <li> <asp:HyperLink ID="HyperLink5" runat="server"  Font-Size="16pt" Font-Underline="false" NavigateUrl="~/Change Payment Method.aspx">Change Payment Method</asp:HyperLink></li> 

                       </ul>
                       </li>
                       </ul></td>
              
               </tr>
               <tr>
                   <td class="auto-style30"><asp:Label ID="Label5" runat="server" ForeColor="Highlight" style="text-transform:capitalize;" Font-Size="14pt" Text="Age: " Font-Bold="True"></asp:Label></td>

Answer 1

如果您希望右侧的图像和菜单随窗口大小缩放，请不要为它们指定特定的宽度。您可以设置最小宽度以确保它们不会低于特定宽度，但除此之外，为两个容器指定其父容器的宽度百分比，以便在您调整窗口大小时缩放它们的大小。