css3实现文字分别出现在同一行两边

CSS3可以利用`text-align`属性结合`float`或者`display`属性来实现在同一行上放置的文字分别位于两侧。以下是两种常见的方法：

1. **浮动（Float）**:
- 将其中一个文本元素设为`float:left`，另一个设为默认的`text-align: left`或不设置，它们会自动对齐在同一行，并分别在左侧和剩余空间显示。
- 例如:

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

2. **Flex布局（Flexbox）**:
- 使用`.flex`容器并设置`display: flex; justify-content: space-between;`，可以使得项目在行内平均分配空间，左右文本将自然分隔。

   .flex-container {
     display: flex;
     justify-content: space-between;
   }

3. **Grid布局（Grid）**:
- 如果需要更复杂的网格结构，可以使用CSS Grid，通过定义行和列来定位元素。

   .grid-container {
     display: grid;
     grid-template-columns: auto auto;
   }