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

概述美好的一天, 我有一个简单的CSS问题. 我正在尝试将表格更改为CSS框,但是对齐表格内容对我来说很难. 下面是我创建的css框内部的示例.如何正确对齐这三个元素(左侧的日历和图标,右侧的文本链接以及右侧的其他日期字段？)？ 我尝试了几件事,但问题是让它正确对齐.我想将使用表创建的此应用程序中的所有内容更改为css.到目前为止,我已经取得了80％的成功. 我想看一些易于理解的代码,看看如何将它应用 美好的一天,

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

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

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

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

[Calendar (icon)                    link                               Date]

更新#1

这是我所说的代码：

<asp:UpdatePanel runat="server" ID="updHoldingsPanel" UpdateMode="Always">        <ContentTemplate>                      <div >              <table valign="absmIDdle"   border="0"   cellpadding="0" cellspacing="0">                                       <tr >                        <td valign="absmIDdle" >                            <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" >                                        <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 >                                            <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 >                            &nbsp;</td>                                               <td >                            <asp:linkbutton ID="linkbutton1" runat="server"  OnClick="linkbutton1_Click">link</asp:linkbutton>                        </td>                        <td >                            <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" >                            &nbsp;</td>                        <td 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;}

解决方法

<div >left</div><div >right</div><div >center</div>

总结

以上是内存溢出为你收集整理的HTML – 如何在一个CSS Box中保存三个不同的文本对齐？全部内容，希望文章能够帮你解决HTML – 如何在一个CSS Box中保存三个不同的文本对齐？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。