Question

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

我有一个div对象，它包含多达n个span元素（数字是可变的，可以在1到3之间）。我希望将跨度定位在左浮动div（part1）的左下角。跨度应水平堆叠，宽度可变。

<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小提琴（请注意，此处的定位是正确的。）：http://jsfiddle.net/fritschs/h5n04gzo/

我在考虑在css中使用第n个子选择器并且每个跨度都使用绝对位置，但是，如何使用可变数量的跨度来处理它？

感谢任何输入

Answer 1

再次检查JsFiddle ... 我刚才添加了这句话：

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

Answer 2

这里有3件事要做。

将卡片设置为position:relative，以便您可以控制meta-data - see this page的绝对位置。
将meta-data设置为bottom:0，将其移至card的底部。
将tag设置为float:left;以水平堆叠它们。如果您愿意，还可以添加margin:right以将它们分开。

＆＃13;

.card {
    width: 400px;
    height: 200px;
    position:relative;
}
.part1 {
    float:left;
    height: 100%;
    width: 50%;
    background-color: blue;    
}
.part2 {
    float:right;
    height: 100%;
    width: 50%;
    background-color:red;    
}

.meta-data {
    position: absolute;
    bottom:0;
}

.tag {
    display: block;
    float:left;
    margin-right:2px;
    background-color: grey;
    font-size: 0.625rem;
}

＆＃13;

<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>
</div>

＆＃13;

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

2 个答案: