Позиционирование переменного числа пролетов внутри div

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 Fiddle простой пример кода (обратите внимание что позиционирование это набросать правильно.): http://jsfiddle.net/fritschs/h5n04gzo/

Я думал об использовании селектора п-й детский однако, в css и позиции абсолютного каждого диапазона, как бы я подходил к этому с переменным числом пролетов?

Спасибо за любой вход

Answer 1

Check 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 вещи, чтобы сделать здесь.

1. Установите карту position:relative, так что вы можете контролировать абсолютное позиционирование meta-data - see this page.

2. Установите meta-data на номер bottom:0, чтобы переместить его в нижнюю часть card.

3. Установите tag на номер float:left;, чтобы уложить их по горизонтали. Вы также можете добавить margin:right, чтобы оставить их немного, если хотите.

.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; 
 
}

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