延伸圖像高度

Question

我有一個圖像定義爲

<td> 
<p>Text for para</p> 
<img src="vertical_divider.png" align="right" style="padding: 15px; height: 100%;"> 
</td> 

的圖像是一個鉛直分隔作用就像一個右邊界到其內容是可編輯的段，所以它保持在高度發生變化。

我如何確保垂直分隔線的高度根據整個段落不斷變化。

Answer 1

使用CSS可以將其設置爲將在空間中擴展的背景圖像。或者，如果你只是想要一條線，你可以做到沒有圖像。

<td style="border-right: 1px solid black;"> 
<p>Text for para</p> 
</td> 

Answer 2

嘗試將圖像作爲背景，重複-Y

td 
{ 
    background-image:url(vertical_divider.png); 
    background-repeat:repeat-y; 
    background-position:right top; 
} 

Answer 3

願這分頻器工作更好地爲背景的段落。

<td> 
    <p style="padding-right:15px;background:url("vertical_divider.png") repeat-y top right;outline:1px solid red;"> 
    Text for <br>para 
    </p> 
</td> 

但是，如果你需要這個分頻器保持在圖像標記點擊或任何。你可以使用float屬性（不兼容）。

<td style="outline:1px solid red;"> 
    <img src="vertical_divider.png" style="display:block;float:right; height: 100%;"> 
    <p>Text for para</p> 
</td>