1

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

在此处输入图像描述

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

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

谁能让我知道如何解决这个问题。

象素

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

1 回答 1

2

您可以为三列指定一个确定的宽度并将它们浮动（...或不浮动。如果您有足够的空间，则不需要浮动，但将它们从流中取出并将它们彼此相邻浮动会起作用）。您的日期过滤器展开，以便应用过滤器 div 换行。给它们一个确定的宽度将使日期文本框垂直对齐，最后为应用过滤器 div 留出更多空间。尝试使用这些数字（最好使用百分比，并且包装器将设置为 100%）。因此，对于您的消息类型，将其设置为 40%，您的日期类型可以为 20%，您的应用类型为 40%。

编辑：我看到你有一个跨度的应用部分。也许将其放置在与日期 div 分开的 div 中将允许对定位进行更多控制（使其成为块元素而不是内联元素）。

于 2013-01-22T14:53:19.627 回答