美好的一天，
我有一个简单的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%;">
</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%;">
</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;
}
答案 0 :(得分：5)
您需要合并float:left和float:right元素以及text-align css属性
答案 1 :(得分：1)
<div style="float:left">left</div>
<div style="float:right">right</div>
<div style="text-align:center">center</div>
答案 2 :(得分：1)
你可以使用这样的东西，我认为这是最简单的方法：
<style>
.wrapper {
width: 600px;
}
.column {
float: left;
width: 200px;
}
.first {
text-align: left;
}
.second{
text-align: center;
}
.third{
text-align: right;
}
</style>
<div class="wrapper">
<div class="column first">
icon
</div>
<div class="column second">
link
</div>
<div class="column third">
date
</div>
</div>
你可以为.first，.second和.third添加CSS来改变它们的宽度，文本对齐方式，颜色......
答案 3 :(得分：0)
尝试这样的事情：
<style type="text/css" media="all">
.row { border: 1px solid black; text-align: center; }
.row > .left { float: left; }
.row > .center { display: inline-block; }
.row > .right { float: right; }
/* after/inline-block (FF, IE5.5-7, S2, O9) */
.row:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.row { display: inline-block; }
.row { display: block; }
</style>
<div class="row">
<div class="left">Calendar (icon)</div>
<div class="center">Link</div>
<div class="right">Date</div>
</div>
左边和右边的div简单地用float定位，并且在.row：after ...后面的CSS中包含在float中。中心div将接受行text-align: center，因为它是inline-block。
请注意，中心部分根据float s之间的可用空间对齐;多行具有错误对齐的中心。而且，就目前而言，宽度太窄会导致最后一块（左/中/右）转到新线;可能有一种方法可以通过溢出来截断它，但这取决于你的目标。
希望这有帮助！
答案 4 :(得分：0)
如果您确实需要列中的数据/文本，则不应该避开表格。表格用于表格数据，如果这就是你的数据，那就继续使用它们。关于表的唯一坏处是当你将它用于设计时。在我看来，你想要显示的是表格数据，所以只需使用'em：）
要检查您的数据是否必须在表格中显示，请回答以下问题：
如果你对这两个问题的答案都是肯定的，那就用一张表。
否则，请使用列表。将图标，链接和日期数据分成如下列表：
<ul class="icon-list column">
<li>Calendar (icon)</li>
<li>Calendar (icon)</li>
<li>Calendar (icon)</li>
</ul>
<ul class="link-list column">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="date-list column">
<li>Date</li>
<li>Date</li>
<li>Date</li>
</ul>
然后使用css，只需浮动它们并添加一些宽度：
.column {
float: left;
width: 33%;
}
别忘了清除花车！ ：）