html – 如何在一个td中对齐多个文本行

2019年8月4日 200次阅读

我需要在TD中有一些元素,这个td大小最多是表格的P,每行应该对齐左边,但是最大的文本应该“触摸”表的右边.

<table width="100%" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="line-height: 20px; width: 49%;">
            <span style=" color: #FF00FF !important; font-size: 12pt; font-weight: bold;">Text First Cell
            </span>
            </td>
            <td style="width: 50%; text-align: right;">
            <span name="span1" style="float: left; width: 100%;">
            <span style="font-family: Arial !important; color: #FF00FF ; font-size: 12pt; font-weight: bold;">Text1 Second Cell Larger Text </span> 
            </span>
            <span name="span2" style="width: 100%; float: left;">
                <span style="font-family: Arial ; color: #FF00FF ; font-size: 12pt; font-weight: bold;"> Text2 Second Cell
                </span>
            </span>
            </td>
        </tr>
    </tbody>
</table>

我几乎可以这样做,但我无法在左侧对齐文本“Text1 Second Cell Larger Text”和“Text2 Second Cell”.

有任何想法吗？
此外,如果有更好的方法,我很想知道！

最佳答案 我刚刚学会了如何做到这一点：

.myDiv {
    float: right;
}
.span1{
    display: block;
}


<div class="myDiv">
<span name="span1" class="span1" >
<span style="font-family: Arial !important; color: #FF00FF ; font-size: 12pt; font-weight: bold;">Text1 Second Cell Larger Text </span> 
</span>
<span name="span2" class="span2">
<span style="font-family: Arial ; color: #FF00FF ; font-size: 12pt; font-weight: bold;"> Text2 Second Cell</span>
</span>
</div>

干杯

点赞