將樣式應用於跨度以在特定位置顯示

這是一個包含多個跨度元素的div。將樣式應用於跨度以在特定位置顯示

<html> 
    <head> 
    <title>TODO supply a title</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style> 
     .content{ 
     border: 1px solid gray; 
     width: 250px; 
     padding: 5px; 
     } 

     .name{     
     font-size: 18px; 
     font-weight: 600; 
     color: #efa520; 
     padding: 2px; 
     } 

     .address{ 
     padding: 2px; 
     color: #c14a1b; 
     } 

     .date{ 
     padding: 2px; 
     color: #a78919; 
     } 

     .ids{ 
     padding: 2px; 
     color: #1b8ac1;    
     } 

    </style> 

    </head> 
    <body> 

    <div class="content"> 
     <span class="name">Christopher Brown</span><br> 
     <span class="address">Washington</span><br> 
     <span class="date">01/11/1987</span><br> 
     <span class="ids">203459867</span><br> 
    </div> 


    </body> 
</html>

我想最後一個跨度，其存在與類名」 .ids'在第一跨距的前方（即，在格的右側上角）僅使用CSS。在不更改或添加任何HTML元素的情況下，我希望進行此更改。但是，如果有必要，只能刪除<br> HTML元素，但保持與現在顯示的結構相同。

來源

2016-12-15 Pooja

我會用柔性佈局order。顯然，刪除<br>或不顯示。

.content { 
    display: flex; 
    flex-direction: column; 
} 
.ids { 
    order: -1; 
} 
.name { 
    order: -2; 
}

片段

.content { 
 
    border: 1px solid gray; 
 
    width: 250px; 
 
    padding: 5px; 
 
} 
 
.name { 
 
    font-size: 18px; 
 
    font-weight: 600; 
 
    color: #efa520; 
 
    padding: 2px; 
 
} 
 
.address { 
 
    padding: 2px; 
 
    color: #c14a1b; 
 
} 
 
.date { 
 
    padding: 2px; 
 
    color: #a78919; 
 
} 
 
.ids { 
 
    padding: 2px; 
 
    color: #1b8ac1; 
 
} 
 
.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.ids { 
 
    order: -1; 
 
} 
 
.name { 
 
    order: -2; 
 
}

<div class="content"> 
 
    <span class="name">Christopher Brown</span> 
 
    <span class="address">Washington</span> 
 
    <span class="date">01/11/1987</span> 
 
    <span class="ids">203459867</span> 
 
</div>

預覽

來源

2016-12-15 10:40:02

感謝您的快速回復和幫助。但是應用這種風格，最後一個跨度是在第一個跨度之前，而不是在第一個跨度之前。我想要在第一個跨度前的最後一個跨度。 – Pooja

@Pooja所以你希望它在克里斯托弗布朗之後，是嗎？ –

是的。請幫助同樣的 – Pooja

將樣式應用於跨度以在特定位置顯示

回答

相關問題