Question

我创建了一个如下网页：

enter image description here

我用css display：table来创建整体布局。我的目的是有3列，左边是消息类型过滤器，中间是日期过滤器，右边是应用过滤器复选框和刷新网格按钮。 gridview出现在表divs

下面的独立div中

我的问题是我无法让“正确”的applyFilters div保持在屏幕右侧的内线。 broswer坚持在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

你可以给三列一个确定的宽度并浮动它们（......或者没有。如果你有足够的空间浮动就没有必要但是将它们从流中取出并将它们彼此相邻浮动会起作用）。您的日期过滤器会展开，以便应用过滤器div包装。给它们一个确定的宽度将垂直对齐日期文本框，为应用过滤器div留下更多的空间。试验数字（使用百分比最好，包装器设置为100％）。因此，对于您的消息类型，将其设为40％，您的日期类型为20％，您的申请类型为40％。

编辑：我看到你在一个范围内有申请部分。将它放在与日期div分开的div中可以允许更多的定位控制（使其成为块元素而不是内联元素）。

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

1 个答案: