如何创建上下对齐的双列布局，实现项左对齐价格右对齐？

嘿，我来帮你搞定这两个布局问题！

1. 让价格精准右对齐到段落最右侧 #

你现在用span加text-align的方式没法把价格推到最右边，因为行内元素span不会撑满整个段落的宽度。换个思路，把每个商品段落改成flex布局就能轻松实现两端对齐：

修改你的CSS：

.thetag {
  width: 300px;
  background-color: red;
  display: flex; /* 启用flex布局 */
  justify-content: space-between; /* 让左右内容分别靠两端对齐 */
}

这样一来，.leftAlign和.rightAlign这两个类其实可以直接删掉了——flex的space-between已经帮你把商品名称左对齐、价格右对齐，完美适配需求。

2. 修正两列顶部错位的间隙问题 #

你的列顶部不对齐，主要是三个小问题在搞鬼：

• <p>标签默认自带上下margin，这些外边距会在分栏时导致列内容错位
• 列布局默认有column-gap（间隙），你没明确设置的话，浏览器会用默认值，加上.thetag的300px宽度，总宽度可能超过容器的650px，导致布局错乱
• padding-top: 0对段落的margin完全没用，因为margin是元素外部的间距

直接上修复后的CSS：

.mainDiv {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  width: 650px;
  background-color: green;
  column-gap: 50px; /* 300*2 + 50 = 650，刚好填满容器宽度 */
}

.thetag {
  width: 300px;
  background-color: red;
  display: flex;
  justify-content: space-between;
  margin: 0; /* 去掉p标签默认的上下margin，消除顶部间隙 */
}

如果希望商品之间有一点间距，别用margin，改用padding: 4px 0这种内边距，这样不会破坏列的顶部对齐效果。

完整可运行代码 #

.mainDiv {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  width: 650px;
  background-color: green;
  column-gap: 50px;
}
.thetag {
  width: 300px;
  background-color: red;
  display: flex;
  justify-content: space-between;
  margin: 0;
}

<div class="mainDiv">
  <p class="thetag"><span>Bread:</span><span> $3</span></p>
  <p class="thetag"><span>Butter: </span><span> $5</span></p>
  <p class="thetag"><span>Milk: </span><span> $3</span></p>
  <p class="thetag"><span>Pasta:</span><span> $5</span></p>
  <p class="thetag"><span>Banana:</span><span> $2</span></p>
  <p class="thetag"><span>Apple: </span><span> $1</span></p>
  <p class="thetag"><span>Broccoli:</span><span> $4</span></p>
  <p class="thetag"><span>Potato: </span><span> $3</span></p>
  <p class="thetag"><span>Cucumber: </span><span> $4</span></p>
</div>

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