html - 在 div 中定位可变数量的跨度

Question

这可能是一个非常简单的答案，但我似乎无法理解它。

我有一个 div 对象，它最多包含 n 个 span 元素(数字是可变的，可以在 1 到例如 3 之间)。我希望跨度位于左浮动 div(第 1 部分)的左下角。跨度应水平堆叠，宽度可变。

<div class="card">
 <span class="meta-data">
    <span class="tag">Something </span>
    <span class="tag">Something else </span>
    <span class="tag">Something else else</span>    
 </span>  
 <div class="part1"></div>
<div class="part2"></div> 

这是一个带有简单示例代码的 js Fiddle(请注意这里的位置是正确的。):http://jsfiddle.net/fritschs/h5n04gzo/

我正在考虑在 css 中使用第 n 个子选择器并在每个 span 中使用绝对位置，但是，我将如何使用可变数量的 span 来实现这一点？

感谢任何输入

Answer 1

检查 JsFiddle再次... 我刚刚添加了这一行:

.card{position:relative;}
.card .meta-data{position:absolute; bottom:0; left:0;}
.card .meta-data span{ float:left; margin-right:10px;}