asp.net 设计页面中的空白空间排列

Question

我为我的网站创建了个人资料页面，其中包含照片、上传按钮和文件上传控件。名字/姓氏等控件放置在与图像和图像控件分开的面板中。问题是 Panel 从顶部留下了巨大的边距（我没有给出边距顶部）。我想删除那个空白。我尝试了一些方法，例如提供位置（绝对/相对），我尝试重新排列控件但没有用

    .common 
    {
        float: left;
        position: relative;
    }

    .Panel 
    {
        margin-right: 50px;
        padding: 20px;
        float: right;
    }

    .layWork 
    {
        border: white 2px solid;
        width: 800px;
        background-color: white;
        border-radius: 50px;
        height: 700px;
        margin: 50px 0px 20px 50px; 
    }

    <div class="layWork">
        <div class="Frontier">
            <br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Image ID="Shasshin" runat="server" src="../Property/EmptyIcon.png" Height="200px" Width="200px" cssClass="common"/>
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Panel ID="proPan" runat="server" CssClass="Panel">
                <asp:Label ID="proFNameLabel" Text="First Name : " runat="server" />
                <asp:TextBox ID="proFNameBox" runat="server" Text=""/>
                <br /><br />
                <asp:Label ID="proLNameLabel" Text="Last Name : " runat="server" />
                <asp:TextBox ID="proLNameBox" runat="server" Text="" />
                <br /><br />
                <asp:Label ID="proAge" Text="Age : " runat="server" />
                <asp:TextBox ID="proAgeBox" runat="server" />
                 <br /><br />
                <asp:Label ID="proBirth" Text="Birthdate : " runat="server"/>
                <asp:TextBox ID="proBirthBox" runat="server"/>
                <br /><br />
                <asp:Label ID="proLoc" Text="Localtion : " runat="server" />
                <asp:TextBox ID="proLocBox" runat="server" />
                <br /><br />
                <asp:Label ID="proNumber" Text="Phone : " runat="server" />
                <asp:TextBox ID="proNumBox" runat="server" />
                <br /><br />
                <asp:Label ID="SkypeID" Text="Skype ID : " runat="server" />
                <asp:LinkButton ID="proSkype" runat="server">Link</asp:LinkButton>
                <br /><br />
                <asp:Label ID="proDesc" Text="Description : " runat="server" />
                <asp:TextBox ID="proDescBox"  TextMode="MultiLine" runat="server" />
                <br /><br />
                <asp:Label ID="proDev" Text="Developer : " runat="server" />
                <asp:TextBox ID="proDevBox" runat="server" />
            </asp:Panel>
            <asp:FileUpload ID="PhotoPicker" CssClass="common" runat="server" /><br />
            <asp:Button ID="PhotoSender" runat="server" cssClass="common" Text="Upload" /> 
        </div>
    </div>

Answer 1

我一般使用表格，所以这可能会有所帮助。

<table>
                <tr>
                    <td style="vertical-align:top">  <asp:Image ID="Shasshin" runat="server" src="../Property/EmptyIcon.png" Height="200px" Width="200px" cssClass="common"/></td>
                    <td>&nbsp;&nbsp;&nbsp;</td>
                    <td style="vertical-align:top"> <asp:Panel ID="proPan" runat="server" CssClass="Panel">
                <asp:Label ID="proFNameLabel" Text="First Name : " runat="server" />
                <asp:TextBox ID="proFNameBox" runat="server" Text=""/>
                <br /><br />
                <asp:Label ID="proLNameLabel" Text="Last Name : " runat="server" />
                <asp:TextBox ID="proLNameBox" runat="server" Text="" />
                <br /><br />
                <asp:Label ID="proAge" Text="Age : " runat="server" />
                <asp:TextBox ID="proAgeBox" runat="server" />
                 <br /><br />
                <asp:Label ID="proBirth" Text="Birthdate : " runat="server"/>
                <asp:TextBox ID="proBirthBox" runat="server"/>
                <br /><br />
                <asp:Label ID="proLoc" Text="Localtion : " runat="server" />
                <asp:TextBox ID="proLocBox" runat="server" />
                <br /><br />
                <asp:Label ID="proNumber" Text="Phone : " runat="server" />
                <asp:TextBox ID="proNumBox" runat="server" />
                <br /><br />
                <asp:Label ID="SkypeID" Text="Skype ID : " runat="server" />
                <asp:LinkButton ID="proSkype" runat="server">Link</asp:LinkButton>
                <br /><br />
                <asp:Label ID="proDesc" Text="Description : " runat="server" />
                <asp:TextBox ID="proDescBox"  TextMode="MultiLine" runat="server" />
                <br /><br />
                <asp:Label ID="proDev" Text="Developer : " runat="server" />
                <asp:TextBox ID="proDevBox" runat="server" />
            </asp:Panel></td>
                </tr>
                <tr>
                    <td> <asp:FileUpload ID="PhotoPicker" CssClass="common" runat="server" /></td>
                    <td> <asp:Button ID="PhotoSender" runat="server" cssClass="common" Text="Upload" /> </td>
                </tr>
            </table>