Css表格，第3列赢得'；不要排队

我创建了一个网页，如下所示：

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

我的问题是，我无法让“正确”的applyFilters div保持在屏幕右侧。broswer坚持在dataFilters分区下显示。注意，这无法从屏幕抓取中看到，但dateFilters分区右侧有大量可用空间

有人能告诉我如何纠正这个问题吗

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

---

你可以给这三个列一个确定的宽度，然后将它们浮动（……或者不浮动。如果你有足够的空间，浮动是不必要的，但是将它们从流中取出，并将它们浮动在一起就行了）。您的日期筛选器将展开，以便“应用筛选器”div将换行。给它们一个确定的宽度将使日期文本框垂直对齐，在末尾为apply filters div留出更多空间。用数字进行实验（最好使用百分比，包装设置为100%）。因此，对于您的消息类型，将其设置为40%，日期类型可以设置为20%，应用类型可以设置为40%

---

编辑：我看到您在一个跨度中有应用部分。也许将其与日期div分开放置在一个div中可以更好地控制定位（使其成为块元素而不是内联元素）。

这看起来像是表格数据。我听从了您的建议，给出了三列div的宽度，删除了display:table属性并将其浮动，这非常有效。非常感谢你的帮助

.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;
}