Float div 不遵守 margin-top

Question

我有一个问题，我相信你一定能解决。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AggiuntaUtente.aspx.cs" Inherits="LogIn.AggiuntaUtente" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JDoc - Inserimento Utente</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="Css/qsf.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        <form id="form1" runat="server">
            <div style="width: 40%; margin-left: 7%; margin-bottom: 5px;">
                <fieldset>
                    <legend style="color: Navy">Anagrafica Utente</legend>
                    <label for="txtNome" class="qsfBodyTextLinkButtonNoHand">Nome</label>
                    <asp:TextBox runat="server" ID="txtNome" Style="margin-bottom: 5px; margin-left: 100px; width: 300px" /><br />
                    <label for="txtCognome" class="qsfBodyTextLinkButtonNoHand">Cognome</label>
                    <asp:TextBox runat="server" ID="txtCognome" Style="margin-left: 80px; width: 300px" />
                    <div class="qsfCellaSeparatore" style="margin-top: 15px;"></div>
                    <div style="text-align: center; margin-top: 20px;">
                        <asp:Label runat="server" Text="L'Utente effettua il ripristino del protocollo in Emergenza?" CssClass="qsfBodyTextLinkButtonNoHand" />
                    </div>
                    <asp:RadioButtonList ID="chkProtoEmergenza" runat="server" RepeatDirection="Horizontal" TextAlign="Right" align="center" Font-Size="Small">
                        <asp:ListItem Selected="True" Value="0" Text="No" />
                        <asp:ListItem Value="1" Text="Si" />
                    </asp:RadioButtonList>
                </fieldset>
            </div>
            <div style="width: 40%; margin-left: 7%;">
                <fieldset>
                    <legend style="color: Navy">Contatti</legend>
                    <label for="txtEmail" class="qsfBodyTextLinkButtonNoHand">Email</label>
                    <asp:TextBox runat="server" ID="txtEmail" Style="margin-bottom: 5px; margin-left: 100px; width: 300px" /><br />
                    <label for="txtTelefono" class="qsfBodyTextLinkButtonNoHand">Telefono Uff.</label>
                    <asp:TextBox runat="server" ID="txtTelefono" Style="margin-bottom: 5px; margin-left: 58px; width: 300px" /><br />
                    <label for="txtCellulare" class="qsfBodyTextLinkButtonNoHand">Cellulare</label>
                    <asp:TextBox runat="server" ID="txtCellulare" Style="margin-bottom: 5px; margin-left: 84px; width: 300px" /><br />
                    <label for="txtFax" class="qsfBodyTextLinkButtonNoHand">Fax</label>
                    <asp:TextBox runat="server" ID="txtFax" Style="margin-bottom: 5px; margin-left: 110px; width: 300px" />
                </fieldset>
            </div>
            <div style="width: 40%; margin-right: 7%; float:right;">
                <fieldset>
                    <legend style="color: Navy">Anagrafica di Sistema</legend>
                    <label for="txtUser" class="qsfBodyTextLinkButtonNoHand">User</label>
                    <asp:TextBox runat="server" ID="TextBox1" Style="margin-bottom: 5px; margin-left: 104px; width: 300px" /><br />
                    <label for="txtPassword" class="qsfBodyTextLinkButtonNoHand">Password</label>
                    <asp:TextBox runat="server" ID="txtPassword" Style="margin-bottom: 5px; margin-left: 77px; width: 300px" /><br />
                    <div class="qsfCellaSeparatore" style="margin-top: 15px;"></div>
                    <div style="margin-top: 20px;">
                        <asp:Label ID="Label1" runat="server" Text="Utente di Dominio" CssClass="qsfBodyTextLinkButtonNoHand" />
                        <asp:RadioButtonList ID="chkDominio" runat="server" RepeatDirection="Horizontal" TextAlign="Right" Font-Size="Small">
                            <asp:ListItem Selected="True" Value="0" Text="No" />
                            <asp:ListItem Value="1" Text="Si" />
                        </asp:RadioButtonList>
                        <asp:Label ID="Label2" runat="server" Text="Dominio" CssClass="qsfBodyTextLinkButtonNoHand" /><asp:DropDownList runat="server" Style="width: 300px; margin-left: 88px" />
                    </div>
                    <div class="qsfCellaSeparatore" style="margin-top: 15px;"></div>
                    <div style="margin-top: 20px;">
                        <asp:Label ID="Label3" runat="server" Text="Qualifica" CssClass="qsfBodyTextLinkButtonNoHand" /><asp:DropDownList ID="DropDownList1" runat="server" Style="width: 300px; margin-left: 88px" /><br />
                        <br />
                        <asp:Label ID="Label4" runat="server" Text="Utente Attivo" CssClass="qsfBodyTextLinkButtonNoHand" />
                        <asp:RadioButtonList ID="chkQualifica" runat="server" RepeatDirection="Horizontal" TextAlign="Right" Font-Size="Small">
                            <asp:ListItem Selected="True" Value="0" Text="No" />
                            <asp:ListItem Value="1" Text="Si" />
                        </asp:RadioButtonList>
                    </div>
                </fieldset>
            </div>
            <div style="width: 40%; margin-right: 7%; float: right;">
                <fieldset>
                    <legend style="color: Navy">Operazioni</legend>
                    <asp:Button runat="server" ID="btnSalva" CssClass="qsfButtonPurple95" Text="Salva" Font-Size="Small" />
                    <asp:Button runat="server" ID="btnAnnulla" CssClass="qsfButtonRed95" Text="Annulla" />
                </fieldset>
            </div>
        </form>
    </div>
</body>
</html>

即使我使用 {margin-top:0px}，我的浮动 div 也没有到达顶部。它在我第二个 div!

的右下方

我可以通过设置 {margin-top:-315px} 让它工作，但在不同的分辨率和屏幕上，它会变得混乱！

如何让我的浮动 div 到达我网站的顶部靠近其他 div 的位置而不是在底部？

编辑： 这是我得到的：

<div id="parent">
    <div id="child">text</div>
</div>

http://jsfiddle.net/ksmd677d/1/

我希望图例为 "Anagrafica di Sistema" 的 div 位于图例为 [=35= 的 div 的 div 右侧的顶部] 并在 "Anagrafica Utente" div 下方我想要带有图例 "Contatti" 的那个，在右边带有 "Operazioni" 的那个这样：

Anagrafica Utente - Anagrafica di Sistema（及以下）Contatti - Operazioni

Answer 1

我把 div 块 "Anagrafica di Sistema" 移到了第二位，这就是你想要的？

1 div

 <div style="width: 40%; margin-left: 7%; margin-bottom: 5px; float: left;">
            <fieldset>
                <legend style="color: Navy">Anagrafica Utente</legend>...

2 div

<div style="width: 40%; margin-right: 7%; float:right;">
            <fieldset>
                <legend style="color: Navy">Anagrafica di Sistema</legend>...

3 div

<div style="width: 40%; margin-left: 7%;  float: left;">
            <fieldset>
                <legend style="color: Navy">Contatti</legend>...

4 div

<div style="width: 40%; margin-right: 7%; float: right;">
            <fieldset>
                <legend style="color: Navy">Operazioni</legend>...

http://jsfiddle.net/38sogsbu/

Float div 不遵守 margin-top

Float div doesn't respect margin-top

html

margin