วิธีการจัดช่วงนี้ไปทางขวาของ div หรือไม่

ฉันมี HTML ต่อไปนี้:

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

ด้วย CSS นี้:

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

หากคุณตรวจสอบ jsFiddle นี้: http://jsfiddle.net/8JwhZ/

คุณจะเห็นว่าชื่อและวันที่ติดกัน มีวิธีที่ฉันจะได้รับวันที่เพื่อจัดชิดขวา? ฉันลองfloat: right;ครั้งที่สอง<span>แต่มันทำให้สไตล์แย่ลงและผลักวันที่ออกจาก div ที่ปิดล้อม

หากคุณสามารถแก้ไข HTML: http://jsfiddle.net/8JwhZ/3/

<div class="title">
  <span class="name">Cumulative performance</span>
  <span class="date">20/02/2011</span>
</div>

.title .date { float:right }
.title .name { float:left }

การทำงานกับแพลทฟอร์มนั้นยุ่งเล็กน้อย:

เทคนิคการเลย์เอาต์แบบอื่น ๆ อีกมากมายที่สามารถทำได้ด้วย flexbox

   div.container {
     display: flex;
     justify-content: space-between;
   }

ในปี 2560 ฉันคิดว่านี่เป็นวิธีแก้ปัญหาที่ดีกว่า (over float) หากคุณไม่ต้องสนับสนุนเบราว์เซอร์รุ่นเก่า: https://caniuse.com/#feat=flexbox

ตรวจสอบซอวิธีการที่แตกต่างกันประเพณีลอยเปรียบเทียบเกี่ยวกับ flexbox ( "อาจรวมถึงคำตอบบางแข่งขัน"): https://jsfiddle.net/b244s19k/25/ หากคุณยังต้องการติดกับลอยฉันแนะนำรุ่นที่สามแน่นอน

อีกทางเลือกหนึ่งในการลอยคือการใช้ตำแหน่งที่แน่นอน:

.title {
  position: relative;
}

.title span:last-child {
  position: absolute;
  right: 6px;   /* must be equal to parent's right padding */
}

ดูเพิ่มเติมซอ

คุณสามารถทำได้โดยไม่ต้องแก้ไข html http://jsfiddle.net/8JwhZ/1085/

<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>

.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }

การแก้ปัญหาโดยใช้ flexbox justify-content: space-betweenโดยไม่ต้อง

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

เมื่อเราใช้flex:1ในครั้งแรก<span>มันจะใช้พื้นที่ทั้งหมดที่เหลือและเลื่อนวินาที<span>ไปทางขวา ซอกับการแก้ปัญหานี้: https://jsfiddle.net/2k1vryn7/

นี่https://jsfiddle.net/7wvx2uLp/3/คุณสามารถเห็นความแตกต่างระหว่างสอง flexbox แนวทาง: flexbox ด้วยjustify-content: space-betweenและ flexbox กับในครั้งแรกflex:1<span>