Float div并不尊重margin-top

时间:2015-02-14 15:38:29

标签: html margin

我遇到了一个问题,我确信你肯定能够修复。

<%@ 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/

我想要传说中的div&#34; Anagrafica di Sistema&#34;在div的右侧与div和传奇&#34; Anagrafica Utente&#34; &#34; Anagrafica Utente&#34; div我想要一个带有传奇的人&#34; Contatti&#34;在右边的那个&#34; Operazioni&#34;这样:

Anagrafica Utente - Anagrafica di Sistema(及以下)Contatti - Operazioni

1 个答案:

答案 0 :(得分: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/