延伸图像高度

Question

我将图像定义为

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

图像是一个垂直分隔符，其作用类似于内容可编辑的段落的右边界，因此它的高度不断变化。

如何确保垂直分隔线根据整个段落的高度不断变化。

Answer 1

尝试使用repeat-y将图像设置为背景

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

Answer 2

使用css，您可以将其设置为将在空间中扩展的背景图像。 或者，如果您只是想要一条线，您可以在没有图像的情况下进行。

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

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>