Question

在一个段落中有两个文本位的最佳代码是什么，一个左对齐，另一个右对齐，也就是：

the least code as possible
the easiest for clients to render (i.e. using least resources)

我添加最后一个以确保<；表格><；tr><；td></td><；td align=右></td></tr></表格>将被排除在外。与几个风格恰当的<；div>、<；span>或<；p>

如果你不确定我的意思，这里有一个例子：页脚左对齐当前登录的用户的名称，在同一行右对齐当前日期和时间和/或网站版本。

Answer 1

尽可能少的标记量（您只需要一个跨度）：

<p>This text is left. <span>This text is right.</span></p>

如何实现左/右样式取决于您，但我建议在ID或类上使用外部样式。

完整的HTML：

<p class="split-para">This text is left. <span>This text is right.</span></p>

以及CSS：

.split-para      { display:block;margin:10px;}
.split-para span { display:block;float:right;width:50%;margin-left:10px;}

Answer 2

做到这一点的唯一正确方法是

<p>
  <span style="float: right">Text on the right</span>
  <span style="float: left">Text on the left</span>
</p>

但是，如果文本溢出，这将给您带来麻烦。如果可以的话，可以使用＜code＞div＜/code＞s（块级元素），并给它们一个固定的＜code＞宽度。

事实上，一个表（或许多具有相应display:table/table-row/table-cell属性的div）将是最安全的解决方案-即使您有很多困难的内容，也不可能破坏它。

Answer 3

我不会把它放在同一个<；p>，因为IMHO这两个信息在语义上太不同了。如果必须的话，我建议：



<p style="text-align:right">
 <span style="float:left">I ll be on the left</span>
 I ll be on the right
</p>

Answer 4

如果文本有不同的大小，并且必须下划线这就是解决方案：

<table>
  <tr>
    <td class= left >January</td>
    <td class= right >2014</td>
  </tr>
</table>

css格式：

table{
    width: 100%;
    border-bottom: 2px solid black;
    /*this is the size of the small text s baseline over part  (≈25px*3/4)*/
    line-height: 19.5px; 
}
table td{
    vertical-align: baseline;
}
.left{
    font-family: Arial;
    font-size: 40px;
    text-align: left;

}
.right{
    font-size: 25px;
    text-align: right;
}

此处演示

Answer 5

我过去曾使用过：

html格式

January<span class="right">2014</span>

Css公司

.right {
    margin-left:100%;
}

演示

Answer 6

好的，你可能想要的将通过以下结果提供给你：

在CSS中：

div { column-count: 2; }
在html中：

<div>；一些文本，bla-bla-bla</div>；

在CSS中，您可以使用div将段落拆分为列，您可以将它们设置为3、4。。。

If you want to have many differend paragraf like that, then put id or class in your div:

友情链接