Css 表格，第 3 列不会保持一致

Question

我创建了一个如下所示的网页:

我使用了 css display:table 来创建整体布局。我的意图是有 3 列，左边是消息类型过滤器，中间是日期过滤器，右边是应用过滤器复选框和刷新网格按钮。 gridview 出现在表格 div 下方的独立 div 中

我的问题是我无法让“正确的”applyFilters div 保持在屏幕右侧的行内。浏览器坚持显示在 dataFilters div 下。请注意，从屏幕截图中看不到这一点，但 dateFilters div 右侧有很多可用空间。

谁能告诉我如何解决这个问题。

Aspx

<div id="layoutTable" style="display:table">    
    <div id="layoutRow1" style="display:table-row">    
        <div id="dataFilters">    
            <div id="table1Row1" style="display:table-row">    
                <span id="msgTypeFilter" class="filterProp">Message Type:    
                    <asp:DropDownList ID="ddlMessageType" DataSourceID="dsmessageType" AutoPostBack="false"    
                        DataValueField="messageType" runat="server" AppendDataBoundItems="true">    
                        <asp:ListItem Text="All" Value="%"></asp:ListItem>    
                    </asp:DropDownList>    
                </span>    
            </div>    
            <div id="table1Row2" style="display:table-row">    
                <%--additional filters here--%>    
            </div>    
        </div> <%--end data filters--%>    

        <div id="dateFilters">    
            <div id="table2Row1" style="display:table-row">    
                <span class="filterProp" id="startDate">Start Date:<asp:TextBox     
                    ID="txtReceivedFilterStart" runat="server" Text="01/01/2013"     
                    AutoPostBack="False" />    
                    <ajaxToolkit:MaskedEditExtender ID="medReceivedStart" runat="server" MaskType="Date"    
                        Mask="99/99/9999" MessageValidatorTip="true" TargetControlID="txtReceivedFilterStart"    
                        AcceptAMPM="false" />    
                </span>    

                <span class="filterProp" id="endDate">End Date:<asp:TextBox     
                    ID="txtReceivedFilterEnd" runat="server" Text="31/12/2050"     
                    AutoPostBack="False" />    
                    <ajaxToolkit:MaskedEditExtender ID="medReceivedEnd" runat="server" MaskType="Date"    
                        Mask="99/99/9999" MessageValidatorTip="true" TargetControlID="txtReceivedFilterEnd" />    
                </span>    

                <span class="filterProp" id="whichDateFilter">Apply date filter to:    
                    <asp:DropDownList runat="server" id="ddlDateFilterFieldname">    
                        <asp:ListItem Value="ReceivedTime" Text="Received Time" />    
                        <asp:ListItem Value="SentTime" Text="Sent Time" />    
                    </asp:DropDownList>    
                </span>    
            </div>    

            <div id="table2Row2" style="display:table-row">    
                <span class="filterProp" id="startTime">    
                    Start Time:<asp:TextBox ID="txtReceivedStartTime"     
                    runat="server" Text="00:00:00" AutoPostBack="False" />    
                    <ajaxToolkit:MaskedEditExtender ID="medReceivedStartTime" runat="server" MaskType="Time"    
                        Mask="99:99:99" MessageValidatorTip="true" TargetControlID="txtReceivedStartTime"    
                        AcceptAMPM="false" />    
                </span>    

                <span class="filterProp" id="endTime">        
                    End Time:<asp:TextBox ID="txtReceivedEndTime" runat="server"     
                    Text="23:59:59" AutoPostBack="False" />    
                    <ajaxToolkit:MaskedEditExtender ID="medReceivedEndTime" runat="server" MaskType="Time"    
                        Mask="99:99:99" MessageValidatorTip="true" TargetControlID="txtReceivedEndTime"    
                        AcceptAMPM="false" />    
                </span>    

                <span class="filterProp" id="medValidators">    
                    <ajaxToolkit:MaskedEditValidator ID="mvalReceivedStart" runat="server" ControlToValidate="txtReceivedFilterStart"    
                        InvalidValueMessage="Incorrect format for date" ControlExtender="medReceivedStart"    
                        TooltipMessage="Enter date in format dd/mm/yyyy" />    
                    <ajaxToolkit:MaskedEditValidator ID="mvalReceivedEnd" runat="server" ControlToValidate="txtReceivedFilterEnd"    
                        ControlExtender="medReceivedEnd" InvalidValueMessage="Incorrect format for date"    
                        TooltipMessage="Enter datee in format dd/mm/yyyy" />    
                    <ajaxToolkit:MaskedEditValidator ID="mvalReceivedStartTime" runat="server" ControlToValidate="txtReceivedStartTime"    
                        InvalidValueMessage="Incorrect format for time" ControlExtender="medReceivedStartTime"    
                        TooltipMessage="Enter time in format hh:mm:ss" />    
                    <ajaxToolkit:MaskedEditValidator ID="mvalReceivedEndTime" runat="server" ControlToValidate="txtReceivedEndTime"    
                        InvalidValueMessage="Incorrect format for time" ControlExtender="medReceivedEndTime"    
                        TooltipMessage="Enter time in format hh:mm:ss" />    
                </span>    

            </div> <%--end table2Row2--%>    
        </div> <%--end dateFilters--%>    
        <div id="applyFilters">    
            <div id="tbl3row1" style="display:table-row">    
                <span class="filterProp" >    
                    <asp:CheckBox ID="chkFilter" runat="server" Text="Apply Filters"     
                    AutoPostBack="False" oncheckedchanged="chkFilter_CheckedChanged"/>    
                </span>    
            </div>    
            <div id="tbl3row2" style="display:table-row">    
                <span >    
                    <asp:Button ID="btnRefresh" runat="server" Text="Refresh Grid"     
                    onclick="btnRefresh_Click" class="button" />    
                </span>    
            </div>    
        </div>    
    </div> <%--end layout row 1--%>    

</div> <%--end layout table--%>

CSS

.filterProp
{
    /* float:left; */
    display:table-cell;
}

#resultsGrid
{
    padding: 20px 0px 20px 0px;
    float: left;
}

#dateFilters > .filterProp
{
    text-align: left;
}

#dateFilters
{
    border: thin solid #C0C0C0;
    display:table;
}

.filtersTitle
{
    font-weight: bold;
    margin-right: 20px;
}

#dataFilters
{
    display:table;
    float:left;
    border: thin solid #C0C0C0;
}

#applyFilters
{
    display:table;
}

.button
{
    background-color: #00CC99;
    color: #FFFFFF;
}

.button:hover
{
    background-color: #33CCCC;
    color: #FFFFFF;
}


.gridPager
{
    text-align: right;
    background-color: #C0C0C0;
    color: #000000;
}

Answer 1

您可以为三列指定一个确定的宽度并将它们 float (...或不 float 。如果您有足够的空间则不需要 float ，但将它们从流中取出并将它们并排 float 会起作用) .您的日期过滤器展开，以便应用过滤器 div 换行。给它们一个明确的宽度将使日期文本框垂直对齐，在末尾为应用过滤器 div 留出更多空间。对数字进行试验(最好使用百分比，包装器将设置为 100%)。因此，对于您的消息类型，将其设为 40%，您的日期类型可以是 20%，您的申请类型将是 40%。

编辑:我看到您在跨度中有应用部分。也许将它放在与日期 div 分开的 div 中可以更好地控制定位(使其成为 block 元素而不是内联元素)。