如何实现两个元素同行显示？响应式布局下 适配失效求助

你的问题根源在于用了固定间距（ ）和固定宽度/边距来控制元素位置，这些硬编码值无法适配不同页面尺寸。改用Flex弹性布局可以轻松实现自适应的同行显示效果，具体修改如下：

步骤1：修改父容器CSS #

给.card-body添加Flex布局，让子元素自动在同一行排列并适配容器：

.card-body {
  display: flex;
  align-items: center; /* 让元素垂直居中对齐 */
  justify-content: space-between; /* 两端对齐，左侧元素靠左，价格靠右 */
}

步骤2：清理子元素的硬编码样式 #

移除.price-right中导致适配问题的固定宽度和边距：

.price-right {
  padding: 0;
  margin: 0;
  font-size: 18px;
  color: #369;
  font-weight: bold;
  /* 删掉原有的 width: 268px; 和 margin-left: 116px; */
}

可选：如果需要将日期和RESTYLING放在左侧同行 #

如果希望2011和RESTYLING在左侧并排，价格在右侧，可以调整HTML结构并添加辅助容器：

<div class="card-body">
  <div class="left-group">
    <span class="bold lot-date">2011</span>
    <h8 class="card-text">RESTYLING</h8>
  </div>
  <p class="price-right"><span class="close">$10000</span></p>
</div>

然后给辅助容器添加Flex布局控制间距：

.left-group {
  display: flex;
  gap: 12px; /* 两个元素之间的间距，可按需调整 */
  align-items: center;
}

效果说明 #

Flex布局会根据容器的宽度自动调整元素位置：

• 当页面宽度足够时，元素保持两端对齐的同行状态
• 当页面缩窄时，元素会根据内容自动调整（如果需要换行，可添加flex-wrap: wrap;到.card-body）

内容的提问来源于stack exchange，提问作者Logan Wilson