元素左侧和右侧的文本

Question

使用CSS什么是在元素的右侧和左侧都有文本并且垂直位于同一位置的最佳方法？

最终得到以下布局:

容器有一个固定的宽度,所以我不想使用定位,因为我知道我没有.

Answer 1

(1)在元素中添加两个包含每个文本字符串的div

<div>
    <div class="div1">Left Text</div>
    <div class="div2">Right Text</div>
</div>

(2)将两个div相邻

.div1 {
    float: left;
}

.div2 {
    float:right;
}

(3)设置右div的文本对齐属性(这将确保文本一直向右推,如示例所示).

.div2 {
    float:right;
    text-align: right;
}

Answer 2

您可以将两个项目放在同一个容器中，然后将它们浮动到正确的位置。

所以你可能有这样的事情：

<div class="container">
   <div class="item1">Item 1</div>
   <div class="item2">Item 2</div>
</div>

和 CSS：

.container{width:500px;}

.item1, item2{width:200px;}
.item1{float:left;}
.item2{float:right;}

示例：http : //jsfiddle.net/7Wvhj/1/