Содержимое новой строки без использования BR

Question

Я пытаюсь добиться простой макет так:

Title at place----------Date 
Location------------Complete 

это то, что я сейчас: http://jsfiddle.net/80m96ko3/2/

Я хочу иметь место и полный на ниже. Единственный способ добиться этого - использовать BR, если только я не должен использовать блок отображения, который сделает ссылку заголовка кликабельной по всей ширине (чего я не хочу). Я бы предпочел не использовать <table>.

<div class="job"> 
<span class="title">Title</span> at <span class="place">Place</span><span class="posted right">15 Jun</span> 
<span class="location">Location</span><span class="type right">Complete</span> 
</div> 

Answer 1

Вы можете использовать псевдо-класс :before (или: после) разорвать линию.

.location:before{ 
    content: ""; 
    display: block; 
} 

Answer 2

Используйте неупорядоченный список. Это сделает вашу работу.

<ul class="job"> 
    <li> 
    <span class="title">Title</span> at <span class="place">Place</span><span class="posted right">15 Jun</span> 
    </li> 
    <li> 
    <span class="location">Location</span><span class="type right">Complete</span> 
    </li> 
</ul> 

Answer 3

Почему бы не использовать неупорядоченный список?

<div class="job"> 
    <ul> 
     <li> 
      <span class="title">Title</span> at <span class="place">Place</span><span class="posted right">15 Jun</span> 
     </li> 
     <li> 
      <span class="location">Location</span><span class="type right">Complete</span> 
     </li> 
    </ul> 
</div> 

И ваши стили:

.right {float: right;} 
ul {list-style: none ;}