asp.net - 在两个不同的行上有两个 div

Question

我有以下代码。我基本上想要两行，第一行左边是一个文件 uploader ，右边是一个按钮，第二行是一条消息，但是下面的代码将标签放在文件 uploader 和按钮之间的第一行中。

<style>
    .balUploader
    {
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
        width:80%;
        float:left;
    }
    .balUploaderCleaner
    {
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
        float:right;
    }
</style>

<div>
    <div>
        <asp:FileUpload ID="uploader" CssClass="balUploader" runat="server"/>
        <asp:ImageButton ID="uploaderEraser" CssClass="balUploaderCleaner" OnClick="uploaderEraser_Click" runat="server" Width="25" Height="25" />
    </div>
    <asp:Label ID="fileSizeError" runat="server" ForeColor="Red">bla bla bla bla bla bla</asp:Label>
</div>

Answer 1

第一个 div 仅包含 float 元素，其高度计算为 0，克服这一问题的方法之一是使用 clearing 修复。

<style>
    .clearFix:before,
    .clearFix:after {
        content: " ";
        display: table;
        height: 0;
        clear: both;
        overflow: hidden;
        visibility: hidden;
    }
    .balUploader
    {
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
        width:80%;
        float:left;
    }
    .balUploaderCleaner
    {
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
        float:right;
    }
</style>

<div>
    <div class="clearFix">
        <asp:FileUpload ID="uploader" CssClass="balUploader" runat="server"/>
        <asp:ImageButton ID="uploaderEraser" CssClass="balUploaderCleaner" OnClick="uploaderEraser_Click" runat="server" Width="25" Height="25" />
    </div>
    <asp:Label ID="fileSizeError" runat="server" ForeColor="Red">bla bla bla bla bla bla</asp:Label>
</div>