文本左對齊和其他文本右對齊具有不同高度同一行

Question

我有這樣的代碼

<div> 
 
    <div style="float:left"> 
 
     <h2>header</h2> 
 
    </div> 
 
    <span style="float:right; vertical-align: bottom"> 
 
      text2 
 
    </span> 
 
    <div class="clear:both"></div> 
 
</div>

我不能夠垂直對齊text2到父母的底部div。

怎麼辦？

Answer 1

這是相當奇怪的HTML代碼，但在這裏是不會改變的HTML的解決方案：

（PS：你問的是，span應與父DIV的底部對齊，而不是問心無愧的h1如果你想後，你必須給他們倆同margin-bottom和padding-bottom）

div:first-of-type { 
 
position: relative; 
 
overflow: hidden; 
 
} 
 
span { 
 
display: block; 
 
position: absolute; 
 
right: 0; 
 
bottom: 0; 
 
}

<div> 
 
    <div style="float:left"> 
 
     <h2>header</h2> 
 
    </div> 
 
    <span style="float:right; vertical-align: bottom"> 
 
      text2 
 
    </span> 
 
    <div class="clear:both"></div> 
 
</div>

Answer 2

P robably你將不得不考慮改變你使用的元素，因爲h2和span沒有相同的默認用戶代理風格。 h2會比跨度顯得更大膽/更大，跨度顯得更輕。這就是爲什麼你看到它不對齊

試試這個

`<div style="float:left"> 
    <h2>header</h2> 
</div> 
<div style="float:right; vertical-align: bottom"> 
     <h2> text2</h2> 
</div> 
<div class="clear:both"></div>`