如何在一个CSS Box中保存三个不同的文本对齐方式？

Question

美好的一天,

我有一个简单的CSS问题.我正在尝试将表格更改为CSS框,但是对齐表格内容对我来说很难.

下面是我创建的css框内部的示例.如何正确对齐这三个元素(左侧的日历和图标,右侧的文本链接以及右侧的其他日期字段？)？

我尝试了几件事,但问题是让它正确对齐.我想将使用表创建的此应用程序中的所有内容更改为css.到目前为止,我已经取得了80%的成功.

我想看一些易于理解的代码,看看如何将它应用到我的代码上.谢谢你的热心帮助.由于压力,我可能会被烧坏.

 [Calendar (icon)                    Link                               Date]

更新#1

这是我所说的代码:

 <asp:UpdatePanel runat="server" ID="updHoldingsPanel" UpdateMode="Always">
        <ContentTemplate>        
              <div class="sitenote">
              <table valign="absmiddle"   border="0"   cellpadding="0" cellspacing="0">                   
                    <tr style="height: 19px">
                        <td valign="absmiddle" style="text-align: left; width: 9%;">
                            <asp:Panel ID="pnlDateZero" runat="server" Width="187px">
                                <table valign="middle" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td valign="middle">
                                            <asp:Label ID="Label1" runat="server" Text="As of" Width="40px"></asp:Label></td>
                                        <td valign="middle" style="width: 80px">
                                        <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Width="80px" Height="15px" OnTextChanged="txtDate_TextChanged" ></asp:TextBox>
                                            <%--<asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Width="80px" Height="15px" contentEditable="false" OnTextChanged="txtDate_TextChanged" ></asp:TextBox>--%>

                                        </td>
                                        <td valign="absmiddle">
                                        <span style="float:left; vertical-align:top; padding-top:0px; padding-top:1px;">
                                            <asp:ImageButton align="middle" ID="imgCalendar" runat="server" ImageUrl="~/images/calendar5.gif"/>                                              
                                         <%--<cc1:CalendarExtender ID="ceDate" runat="server" PopupButtonID="imgCalendar" Format="MM/dd/yyyy" TargetControlID="txtDate" FirstDayOfWeek="Monday"></cc1:CalendarExtender>--%>
                                        </span>
                                        </td>

                                    </tr>
                                </table>
                            </asp:Panel>
                            <asp:Label ID="lblAsOf" Text="" runat="server" Visible="False"></asp:Label></td>
                        <td style="text-align:center; width: 27%;">
                            &nbsp;</td>                       
                        <td style="text-align:center; width: 11%;">
                            <asp:LinkButton ID="LinkButton1" runat="server"  OnClick="LinkButton1_Click">LINK</asp:LinkButton>
                        </td>

                        <td style="text-align:left; width: 2%;">
                            <asp:UpdateProgress AssociatedUpdatePanelID="updHoldingsPanel" id="UpdateProgress1" runat="server" DisplayAfter="100" DynamicLayout="false">
                                <ProgressTemplate>
                                    <asp:Image ID="Image3" runat="server" ImageUrl="~/images/live_com_loading.gif">
                                    </asp:Image>
                                </ProgressTemplate>
                            </asp:UpdateProgress> 
                        </td>
                        <td valign="absmiddle" style="text-align: right; width: 1%;">
                            &nbsp;</td>
                        <td style="text-align: right;  valign="absmiddle">
                            <asp:CheckBox ID="chkInclude" runat="server" AutoPostBack="true" 
                                OnCheckedChanged="chkInclude_CheckedChanged" Text="Include Zero Holdings" 
                                VerticalAlign="Middle" />
                        </td>
                    </tr>
                </table>
            </div>

和盒子的CSS是:

.sitenote {
    display:block;
    padding:6px;
    border:1px solid #bae2f0;
    background:#e3f4f9;
    line-height:130%;
    font-size:13px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0.5em;
    margin-left: 0;
}

Answer 1

您需要结合float:left和float:right元素和text-alignCSS属性

完整代码:http://jsbin.com/ilano3/3/edit