次のような Web ページを作成しました。
css display:table を使用して全体のレイアウトを作成しました。私の意図は、メッセージ タイプ フィルター用の左側、日付フィルター用の中央、フィルターの適用チェックボックスとグリッドの更新ボタン用の 3 つの列を持つことです。グリッドビューは、テーブル 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;
}