Question

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

<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仅包含浮动元素，其高度计算为0，其中一种方法是使用clear修复。

<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>

在两个不同的行上有两个div

1 个答案: