0

我想让我的左列右对齐，我的右列左对齐，以便它们沿着中心轴排列，如下所示：

 16 January 2013 | Here is a line of text. 
26 December 2013 | Another line of text here. 
      4 May 2011 | Here is something else.

HTML在<span>s中，像这样：

<div class="line"> 
    <span class="date">16 January 2013</span> <span class="text">Here is a line of text.</span>
</div>

我一直在尝试这样做.line { display: table-row; }，.line span { display: table-cell; }但它似乎不起作用。

4

3 回答 3

1

尝试这个..

<div class="line"> 
    <div style="width:50%;float:left;text-align:right;" class="date">16 January 2013</div>     
    <div style="width:50%;float:left;text-align:left;" class="text">Here is a line of text.</div>
</div>

div-s 你可以吗？:D

于 2013-08-18T16:25:19.530 回答
0

我会留在跨度：

CSS：

    #container
{
    display: table;
}

.left
{
    margin-left: 10px;
    width: 200px;
    float: right;
    text-align: left;
}

.right
{
    margin-right: 10px;
    width: 200px;
    text-align: right;
    float: left;
}

HTML：

<div id='container'>
    <span class='left'>Lorem</span> <span class='right'>Ipsum</span><br/>
    <span class='left'>dolor sit</span> <span class='right'>amet</span>
</div>

请参阅此处：http: //jsfiddle.net/AyhyZ/1/

于 2013-08-18T16:26:53.580 回答
0

您可以使用显示属性的表格单元格值。

参见示例http://jsbin.com/eYOWaYA/1/edit

于 2013-08-18T16:41:23.570 回答