Предотвращение переполнения элементов встроенного блока от их родителя

Question

Текст в span s ниже переполнения (см. Скрипку). Я не могу понять, почему.

JSFiddle

http://jsfiddle.net/8xuah0kn/

HTML

<table> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Date</th> 
      <th>Participant</th> 
      <th>Car ID</th> 
      <th>Score</th> 
      <th>Round Totals</th> 
      <th>Pro</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>X</td> 
      <td>7/15</td> 
      <td>Alfonso Ribeiro</td> 
      <td>1001</td> 
      <td> 
       <div class="faux-row"> 
        <span>Start</span> 
        <span>2003</span> 
       </div> 
       <div class="faux-row"> 
        <span>End</span> 
        <span>2140</span> 
       </div> 
      </td> 
      <td> 

      </td> 
      <td>yes</td> 
     </tr> 
     <tr> 
      <td>X</td> 
      <td>7/15</td> 
      <td>Joan Rodriguez</td> 
      <td>1002</td> 
      <td> 
       <div class="faux-row"> 
        <span>Start</span> 
        <span>100</span> 
       </div> 
       <div class="faux-row"> 
        <span>End</span> 
        <span>0</span> 
       </div> 
      </td> 
      <td> 

      </td> 
      <td>yes</td> 
     </tr> 
     <tr> 
      <td>X</td> 
      <td>7/15</td> 
      <td>Jeremy Johns</td> 
      <td>1003</td> 
      <td> 
       <div class="faux-row"> 
        <span>Start</span> 
        <span>1000200</span> 
       </div> 
       <div class="faux-row"> 
        <span>End</span> 
        <span>1002232</span> 
       </div> 
      </td> 
      <td> 

      </td> 
      <td>yes</td> 
     </tr> 
    </tbody> 
</table> 

CSS

body { 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 0.9em; 
} 
td:nth-child(1) { 
    color: red; 
    font-size: 0.8em; 
} 
td:nth-child(4) { 
    max-width: 60px; 
    word-wrap: break-word; 
} 
td:nth-child(5) .faux-row { 
    background-color: #def; 
    margin: 5px; 
    padding: 2px; 
} 
td:nth-child(5) span:nth-child(1) { 
    display: inline-block; 
    text-align: left; 
    width: 46%; 
    vertical-align: middle; 
} 
td:nth-child(5) span:nth-child(2) { 
    display: inline-block; 
    text-align: right; 
    width: 46%; 
    vertical-align: middle; 
} 
table { 
    border-collapse: collapse; 
} 
td, th { 
    border: 1px solid maroon; 
    padding: 2px; 
    text-align: center; 
} 
th { 
    background-color: lightyellow; 
} 

Чем выше код пытается достичь:

• Держите «Start/End» пядь сдвинут влево, и связанный с ним пункт номер справа.
• Предотвращение номер точки от упаковки к следующей строке
• сделать это без жесткого кодирования в большой ширины в пикселях

Answer 1

1) Удалите ширина

2) Добавить text-align: left; родителю пролетах

3) Поплавок второй пролет направо

FIDDLE

td:nth-child(5) .faux-row { 
    background-color: #def; 
    margin: 5px; 
    padding: 2px; 
    text-align: left; /* <-- */ 
} 
td:nth-child(5) span:nth-child(2) { 
    display: inline-block; 
    float: right; /* <-- */ 
    vertical-align: middle; 
    margin: 1px 0 0 10px; /* <-- */ 
} 

Answer 2

Вы можете легко достичь желаемого результата с помощью CSS поплавки:

Updated Fiddle

td:nth-child(5) .faux-row { 
    background-color: #def; 
    margin: 5px; 
    padding: 2px; 
    /* added to contain floats */ 
    overflow: hidden; 
} 
td:nth-child(5) span:nth-child(1) { 
    float: left; 
} 
td:nth-child(5) span:nth-child(2) { 
    float: right; 
} 

---

Кроме того, можно достичь желаемого результата с помощью display: table-cell:

Updated Fiddle

td:nth-child(5) .faux-row { 
    background-color: #def; 
    /* zero margin and padding make 100% width tick */ 
    margin: 0; 
    padding: 0; 
    /* changed */ 
    display: table; 
    width: 100%; 
} 
td:nth-child(5) span:nth-child(1) { 
    /* changed */ 
    display: table-cell; 
    text-align: left; 
} 
td:nth-child(5) span:nth-child(2) { 
    /* changed */ 
    display: table-cell; 
    text-align: right; 
}