Элемент позиции посередине между смежным элементом и концом родительского элемента

Question

У меня есть следующая разметка. Он поставляется динамически, я ограничен тем, какие изменения могут быть внесены в него.

Markup:

<div id="container"> 
    <div class="stage"> 
     <span class="stageText">Hello World</span> 
     <span class="icon">|</span> 
    </div> 

    <div class="stage"> 
     <span class="stageText">Hello</span> 
     <span class="icon">|</span> 
    </div> 

    <div class="stage"> 
     <span class="stageText">Hi There</span> 
     <span class="icon">|</span> 
    </div> 
</div> 

CSS (не совсем Doing как требуется/описано)

#container { 
    border-top:1px solid #ccc; 
    border-bottom:1px solid #ccc; 
    display:table; 
    width:445px; 
} 

.stage { 
    display:table-cell; 
    width:33.33333%; 
} 

.icon { 
    width:3px; 
    margin-left:auto; 
    margin-right:auto; 
} 

мне нужно позиционировать = "значок" < пролет класса > | </span > на полпути между концом < span class = "stageText" > и правая граница родительского элемента. Вот пример jsfiddle, демонстрирующий ситуацию: http://jsfiddle.net/jralston/vc6pzawk/

Любая помощь или указатели очень ценится.

Спасибо

Джон

Answer 1

Читать комментарии к изменениям. Преимущество этого метода в том, что вам не нужно использовать javascript или изменять html, просто css.

JSFiddle

#container { 
    border-top:1px solid #ccc; 
    border-bottom:1px solid #ccc; 
    display:table; 
    width:445px; 
} 

.stage { 
    display:inline-block;/*instead of table-cell*/ 
    text-align: center;/*centers text*/ 
    float: left;/*float */ 
    width:33.33333%; 
} 

.icon { 
    float: right;/*put icons left or right from text*/ 
    width:3px; 
} 

Answer 2

Я не уверен, если есть легко сделать это в CSS, но вы можете сделать это довольно легко с помощью JS & JQuery:

$('.icon').each(function() { 
    var $el = $(this), 
     containerWidth = $el.parent().width(), 
     contentWidth = $el.prev().width(); 

    $el.css('left', (contentWidth) + ((containerWidth - contentWidth)/2)); 
}); 

http://jsfiddle.net/vc6pzawk/3/

Answer 3

Я создаю этот раствор с использованием псевдоэлемента :after:

#container { 
 
    border-top:1px solid #ccc; 
 
    border-bottom:1px solid #ccc; 
 
    display:table; 
 
    width:445px; 
 
} 
 

 
.stage { 
 
    display:table-cell; 
 
    width:33.33333%; 
 
} 
 

 
.stage:after { 
 
    content: "|"; 
 
    position: relative; 
 
    left: 25%; 
 
}

<div id="container"> 
 
    <div class="stage"> 
 
     <span class="stageText">Hello World</span> 
 
    </div> 
 
    
 
    <div class="stage"> 
 
     <span class="stageText">Hello</span> 
 
    </div> 
 
    
 
    <div class="stage"> 
 
     <span class="stageText">Hi There</span> 
 
    </div> 
 
</div>