当页面不是全屏时,HTML格式会发生变化

时间:2014-10-07 07:24:43

标签: html css asp.net html5

我有一个aspx页面,如下所示:

enter image description here

当我恢复窗口时,布局变为如下所示:

enter image description here

如何阻止这种情况发生?我的代码如下:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
Debug="true" CodeFile="MAIN.aspx.cs" Inherits="MAIN" %>



<script type="text/javascript">
    var validFilesTypes = ["jpg", "JPG", "png", "PNG", "jpeg", "gif", "GIF"];

    function CheckExtension(file) {
        /*global document: false */
        var lbl = document.getElementById('<%=lblMessage.ClientID %>');
        lbl.innerHTML = "";
        var filePath = file.value;
        var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
        var isValidFile = false;

        for (var i = 0; i < validFilesTypes.length; i++) {
            if (ext == validFilesTypes[i]) {
                isValidFile = true;
                break;
            }
        }

        if (!isValidFile) {
            file.value = null;

            lbl.innerHTML = "Only jpg, png and gif allowed";
            // alert("Invalid File. Valid extensions are:\n\n" + validFilesTypes.join(", "));
            return false;
        }

        return isValidFile;
    }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server"             ID="ScriptManager1" />
<br />

<a href="lp.aspx" style="font-size:small; margin-left:-100px">Change Location</a>
<br />
<br />
<div id="divSearch" style="width: 100%; height: 35px">
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<asp:TextBox ID="txtSearch" runat="server" Width="50%"
        Height="100%"></asp:TextBox>
    <asp:Button ID="btnSearch" runat="server" Height="100%" Text="Search" CausesValidation="false"
        OnClick="btnSearch_Click" />
    <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" WatermarkText="Enter street followed by City"
        runat="server" TargetControlID="txtSearch" />
     <asp:AdRotator style="margin-left:250px" id="CAdRotator" runat="server" AdvertisementFile="AdRotatorFiles.xml"   
                        Width="200px" Height="100%" Target="_blank"></asp:AdRotator>
</div>

<br />
<asp:Label ID="lblMsg" runat="server" Text="aa" Width="1%" Visible="false"></asp:Label>
 <div style="overflow:hidden;">
   <input type="hidden" runat="server" id="hcheckQuery" />
        <div style="width:80%; float:left;">
            <table>
            <tr>
                <td valign="top">


                        <table>
                            <tr>
                                <td>
                                    <asp:GridView ID="RepDetails" style="float:none" OnRowDataBound="RowDataBound" OnRowCreated="RowCreated"  Width="100%" runat="server" AutoGenerateColumns="False" BackColor="White"
                                        BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px">

                                        <FooterStyle BackColor="White" ForeColor="#000066" />
                                        <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                                        <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                                        <RowStyle ForeColor="#000066" />
                                        <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                                        <SortedAscendingCellStyle BackColor="#F1F1F1" />
                                        <SortedAscendingHeaderStyle BackColor="#007DBB" />
                                        <SortedDescendingCellStyle BackColor="#CAC9C9" />
                                        <SortedDescendingHeaderStyle BackColor="#00547E" />
                                    </asp:GridView>
                                </td>
                            </tr>
                        </table>

                </td>
            </tr>
        </table>
    </div>




        <div id="divPost" style="float: right;">
            <div>
                <asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>    </div>
            <table width="100%" class="imagetable">
                <tr>
                    <td>
                        Province<asp:DropDownList ID="ddlProvince" CssClass="font1" runat="server" Width="90%">
                            <asp:ListItem Text="---Select---" Value="-1"></asp:ListItem>
                            <asp:ListItem Text="Alberta" Value="1" Selected="True"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="ddlProvince"
                            InitialValue="-1" ErrorMessage="*" ValidationGroup="g1"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        City<br />
                        <asp:DropDownList ID="ddlCity" CssClass="font1" runat="server" Width="90%">
                            <asp:ListItem Text="---Select---" Value="-1"></asp:ListItem>
                            <asp:ListItem Text="Edmonton" Value="1" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Calgary" Value="2"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="ddlCity"
                            InitialValue="-1" ErrorMessage="*" ValidationGroup="g1"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        Description<asp:TextBox ID="txtDescription" CssClass="font1" TextMode="MultiLine"
                            runat="server" Width="90%"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="txtDescription"
                            ErrorMessage="*" ValidationGroup="g1"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        Address<asp:TextBox ID="txtAddress" CssClass="font1" TextMode="MultiLine" runat="server"
                            Width="90%"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtAddress"
                            ErrorMessage="*" ValidationGroup="g1"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        Rent (CAD)<asp:TextBox ID="txtRent" CssClass="font1" runat="server" Width="90%"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtRent"
                            ErrorMessage="*" ValidationGroup="g1"></asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtRent"
                            ErrorMessage="*" ValidationExpression="\d+" ValidationGroup="g1">
                        </asp:RegularExpressionValidator>
                    </td>
                </tr>
                  <tr>
                    <td>
                        Email<asp:TextBox ID="txtEmail" CssClass="font1" runat="server" Width="90%"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtEmail"
                            ErrorMessage="*"  ValidationGroup="g1"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        Phone<asp:TextBox ID="txtPhone" CssClass="font1" runat="server" Width="90%"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtPhone"
                            ErrorMessage="*" ValidationGroup="g1"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        Image<asp:FileUpload ID="fuImage" runat="server" onchange="return CheckExtension(this);" />

                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnSubmit" CssClass="font1" runat="server"     BackColor="DarkKhaki"
                            Text="Submit" ValidationGroup="g1"       OnClick="btnSubmit_Click" />
                    </td>
                </tr>
            </table>
            <br />
            <br />
            <br />
            <br />
            <br />
            <div style="border-style:solid; border-color:Lime">
            <asp:Label ID="lblHits" runat="server"  ></asp:Label>
            </div>
        </div>


</div>

我已经尝试了min-width,但这不起作用。

1 个答案:

答案 0 :(得分:0)

我所要做的就是添加resize jquery

像这样的东西

$(window).resize(function() {
        if ($(window).width() <= 1200)
            $("body").css("width", "130%");
        else
            $("body").css("width", "100%");
    });