元素左侧和右侧的文本

【问题标题】：text on left and right side of element元素左侧和右侧的文本
【发布时间】：2011-07-07 16:15:35
【问题描述】：

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

因此最终得到以下布局：

容器的宽度是固定的，所以我不想使用定位，因为我知道我不必这样做。

【问题讨论】：

【解决方案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 的 text-align 属性（这将确保文本一直被推到右侧，如您的示例所示）。

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

【讨论】：

【解决方案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;}

【讨论】：