将样式应用于跨度以在特定位置显示

这是一个包含多个跨度元素的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

将样式应用于跨度以在特定位置显示

回答

相关问题