CSS：在div頂部垂直對齊文本

Question

如果將float:right應用於<span> ，如何在<div>頂部對齊<span>文本。

這是我的代碼：

 span { float: right; } 

 <div>Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit, <br> sed diam nonummy nibh dolore <span>Align me</span> </div> 

我嘗試了vertical-align:text-top但是它不起作用。 我不能使用負邊距，甚至不能對HTML進行任何更改。

Answer 1

您可以使用position: absolute將它對齊到右上角：

  p { position: relative; } span { position: absolute; top: 0; right: 0; } 

 <p>Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit,<br> sed diam nonummy nibh dolore <span>Align me</span></p> 

Answer 2

請看此並讓我知道。

span {
  float: right;
  position: relative;
  bottom:40px;
}

Answer 3

您可以使用Flexbox並設置align-items: flex-start 。

 p { display: flex; align-items: flex-start; justify-content: space-between; } 

 <p>Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit,<br> sed diam nonummy nibh dolore <span>Align me</span></p> 

Answer 4

這是示例，因為您無法編輯HTML ，因此可以制作一個css更改示例：

    span#mySpan {
    background-color:yellow;
    vertical-align:middle;
}

Answer 5

我認為立場：絕對是最好的。
喜歡，
position:absolute; right:0; top:0;}
你試一試

Answer 6

翻譯🔝：

span {
  float: right;
  transform:translateY(-200%)
}

CSS網格📐：

p {
  display: grid;
}

span {
  float: right;
  grid-column-start:2;
  text-align: right;
}

Answer 7

希望這可以幫助您解決問題：

<div>Lorem ipsum dolor sit amet,
  <br>consectetuer adipiscing elit,
  <br> sed diam nonummy nibh dolore
  <span>Align me</span>
</div>


div {  
   border: 1px solid gray;
   position: relative; 
   display: flex;
    }

span {
  display: inline-block;     
}