如何在一个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-align css属性

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

Answer 2

<div style="float:left">left</div>
<div style="float:right">right</div>
<div style="text-align:center">center</div>

Answer 3

你可以使用这样的东西，我认为这是最简单的方法：

<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来改变它们的宽度，文本对齐，颜色......

http://jsfiddle.net/T8JMM/2/

Answer 4

尝试这样的事情：

<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之间的可用空间对齐; 多行具有错误对齐的中心。 而且，就目前而言，宽度太窄会导致最后一块（左/中/右）转到新线; 可能有一种方法可以用溢出来截断它，但这取决于你的目的。

希望这可以帮助！

Answer 5

如果您确实需要列中的数据/文本，则不应该避开表。 表格用于表格数据，如果这就是你的数据，那就继续使用它们。 关于表的唯一坏处是当你将它用于设计时。 在我看来，你想要显示的是表格数据，所以只需使用'em :)

要检查您的数据是否必须显示在表格中，请回答以下问题：

1. 图标，链接和日期是否应始终位于同一行？
2. 右侧的日期是否与左侧的链接绑定？

如果您对这两个问题的回答都是肯定的，那么只需使用表格。

否则，请使用列表。 将图标，链接和日期数据分成如下列表：

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

别忘了清除浮子！ :)