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>

延伸图像高度

3 个答案: