2016-12-15 5 views
0

複数のスパン要素を含む1つの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> 

私はCSSを使用した(すなわち、div要素の右側上部の角に)最初のスパンの前にクラス名が」.ids'が存在している最後の1つのスパンをしたいです。 HTML要素を変更したり追加したりすることなく、この変更が必要です。ただし、必要な場合は今すぐ表示するのと同じ構造を維持すれば、<br> HTML要素のみを削除することができます。

答えて

3

orderのフレックスレイアウトを使用します。明らかに、<br>を削除するか、noneを表示してください。

.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>

プレビュー

updated preview

+0

ご返信ありがとうございました。しかしこのスタイルを適用すると、最後のスパンは最初のスパンの前ではなく、最初のスパンの前になります。私は最初のスパンの前に最後のスパンをしたい。 – Pooja

+0

@Poojaそれでは、クリストファー・ブラウンの後にしたいですね? –

+0

はい。同じように助けてください – Pooja

関連する問題