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; }andでやろうとしまし.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 に答える