方法一：使用 Flexbox 布局
Flexbox 是一种非常强大的布局工具，可以轻松实现两端对齐的效果。
```html
```
```css
.container {
display: flex;
justify-content: space-between; / 子元素两端对齐 /
}
.item {
padding: 10px;
background-color: f0f0f0;
margin: 5px;
}
.item-left {
background-color: ffcccc;
}
.item-right {
background-color: ccffcc;
}
```
在这个例子中，`justify-content: space-between;` 属性使得两个子元素分别位于容器的两端。
方法二：使用 Grid 布局
CSS Grid 布局同样可以轻松实现这种效果。
```html
```
```css
.grid-container {
display: grid;
grid-template-columns: 1fr auto; / 两列布局 /
column-gap: 10px;
}
.grid-item-left {
text-align: left;
}
.grid-item-right {
text-align: right;
}
.grid-item {
padding: 10px;
background-color: f0f0f0;
margin: 5px;
}
```
这里通过设置 `grid-template-columns` 来定义两列，其中第一列占据剩余空间，第二列自适应宽度，从而实现两端对齐的效果。
方法三：使用绝对定位
如果需要更复杂的控制，可以使用绝对定位来实现两端对齐。
```html
```
```css
.position-container {
position: relative;
width: 100%;
height: 50px;
background-color: ddd;
}
.position-left {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: ffcccc;
line-height: 50px;
padding: 0 10px;
}
.position-right {
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: ccffcc;
line-height: 50px;
padding: 0 10px;
}
```
这种方法通过设置左右两边的绝对位置来确保两个子元素分别位于容器的两端。
总结
以上三种方法都可以有效地实现两个子元素的两端对齐。Flexbox 和 Grid 布局是现代网页设计中最常用的方法，它们不仅简单易用，而且具有很好的响应式特性。而绝对定位则适用于需要更精细控制的情况。根据实际项目的需求和个人偏好，可以选择最适合的方式来实现这一效果。
