如何使用CSS解决一行有三个元素，前两个元素靠左排列，第三个元素靠右排列的问题

如图所示，我要把左边的场馆和区域信息靠左排列，价格信息靠右排列。如何使用CSS实现这种效果？

在这里插入图片描述

在这里，我使用了flexbox弹性布局，以下是我的实现代码

                .name-info {display: flex;gap: 2px;justify-content: space-between;align-items: center;}.venue-name {font-weight: 600;font-size: 16px;color: #2c3e50;}.partition-name {font-size: 13px;color: #5a7a9a;margin-left: 6px;}.price {font-size: 17px;font-weight: 600;color: #0077cc;margin-left: auto;}

其中，name-info是我为这三个元素设置的一个父级class，在父级class中使用display:flex；在price类中使用margin-left:auto;即可实现如上图所示的效果，让价格标签靠左显示。但是由于左边的两个标签中的字体大小不一致，flex之后可能会出现左边的两个标签对不齐的情况，所以我又加上了justify-content: space-between;align-items: center;确保左边的两个标签对齐。

下面再拓展几种实现上面的布局的基本实现方法：

1.Flexbox 弹性布局（推荐方案）

实现原理：通过 margin-left: auto 占据剩余空间实现右对齐

<div class="container"><div class="item">元素1</div><div class="item">元素2</div><div class="item right">元素3</div>
</div>
<style>
.container {display: flex;  /* 启用弹性布局 
/
*  gap: 10px;      /*可选：元素间距 */
}
.right {margin-left: auto;  /* 将第三个元素推到右侧 */
}
</style>

优势：代码简洁、支持动态内容、无需计算宽度

2.Grid 网格布局

实现原理：通过 grid-template-columns 定义列宽，结合 justify-self 控制对齐

<div class="container"><div class="item">元素1</div><div class="item">元素2</div><div class="item right">元素3</div>
</div>
<style>
.container {display: grid;grid-template-columns: auto auto 1fr; /* 前两列自动宽度，第三列占据剩余空间 */gap: 10px;
}
.right {justify-self: end;  /* 单元格内右对齐 */
}
</style>

适用场景：需要多列复杂布局时

3.浮动布局（传统方法）

实现原理：前两个元素左浮动，第三个元素右浮动

<div class="container"><div class="item left">元素1</div><div class="item left">元素2</div><div class="item right">元素3</div><div style="clear: both;"></div> <!-- 清除浮动 -->
</div>
<style>
.left {float: left;margin-right: 10px;
}
.right {float: right;
}
</style>

注意点：需手动清除浮动，否则会导致父容器高度塌陷

4.绝对定位（特定场景）

实现原理：第三个元素脱离文档流定位到右侧

<div class="container"><div class="item">元素1 元素2</div><div class="item right">元素3</div>
</div>
<style>
.container {position: relative;  /* 定位参考基准 */
}
.right {position: absolute;right: 0;top: 50%;transform: translateY(-50%);  /* 垂直居中 */
}
</style>