Question

我想要文本框/文本区域顶部/左侧的红色方块，但我不想创建空白区域。附图中，顶部是没有图像的样子，中间是我现在拥有的（白色空间用紫色圈出），底部是我喜欢的样子。

当前图片代码如下所示：

<img src="images/red.png" style="position:relative;display:block;top:10px;z-index:1;" />

更多代码，最后一行是带有image和textarea的单元格所在的位置：

＆＃13;

<table style="Width:100%;" border="1" cellpadding="2" cellspacing="0">
  <tr bgcolor="LightBlue">
    <th colspan="5" align="Left">
      <B>Numeric Tests</B>
    </th>
  </tr>
  <tr bgcolor="LightBlue">
    <th align="Left" style="Width:250px;">
      <B>Metric</B>
    </th>
    <th align="CENTER" style="Width:75px;">
      <B>Target</B>
    </th>
    <th align="CENTER" style="Width:75px;">
      <B>ACT</B>
    </th>
    <th colspan="2" align="Left">
      <B>Comments</B>
    </th>
  </tr>
  <tr>
    <td align="Left" style="Width:250px;"><b>test value 1:</b></td>
    <td align="Left" style="Width:75px;"><b>74.1</b></td>
    <th align="Left" bgcolor="PaleVioletRed" style="Width:75px;" title="The Actual Value must be >= the Target to be satisfied.">65.97</th>
    <td bgcolor="White"><img src="http://via.placeholder.com/10x10" style="position:relative;display:block;top:10px;z-index:1;" /><textarea name="comments7000" rows="2" cols="20" id="comments7000" style="border-width:1px;border-style:solid;width:100%;font-size:Large;">
    fasdfasdf</textarea></td>
  </tr>
</table>

＆＃13;

Answer 1

您应该使用position: absolute代替position: relative作为您的图片，并将position: relative设置为其父级。

这样你就不会有空格了。

Answer 2

将position:relative添加到此表格单元格的<td>，并将图片的位置属性更改为position:absolute。它会起作用。

Answer 3

你将textarea和img包装在一个div中，然后正如其他人提到的那样位置相对而绝对应该这样做，如果你对这是如何工作有任何疑问，请随时提问。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

td>div {
  position: relative;
  /*to remove the white space below remove this so see it*/
  font-size: 0;
}

td>div>img {
  position: absolute;
  display: block;
  top: 10px;
  z-index: 1;
}

td>div>textarea {
  padding-top: 10px;
  border-width: 1px;
  border-style: solid;
  width: 100%;
  font-size: Large;
}

<table style="Width:100%;" border="1" cellpadding="2" cellspacing="0">
  <tr bgcolor="LightBlue">
    <th colspan="5" align="Left">
      <B>Numeric Tests</B>
    </th>
  </tr>
  <tr bgcolor="LightBlue">
    <th align="Left" style="Width:250px;">
      <B>Metric</B>
    </th>
    <th align="CENTER" style="Width:75px;">
      <B>Target</B>
    </th>
    <th align="CENTER" style="Width:75px;">
      <B>ACT</B>
    </th>
    <th colspan="2" align="Left">
      <B>Comments</B>
    </th>
  </tr>
  <tr>
    <td align="Left" style="Width:250px;">
      <b>test value 1:</b>
    </td>
    <td align="Left" style="Width:75px;">
      <b>74.1</b>
    </td>
    <th align="Left" bgcolor="PaleVioletRed" style="Width:75px;" title="The Actual Value must be >= the Target to be satisfied.">65.97</th>
    <td bgcolor="White">
      <div>
        <img src="http://via.placeholder.com/10x10 " /><textarea name="comments7000" rows="2" cols="20" id="comments7000">fasdfasdf</textarea>
      </div>
    </td>
  </tr>
</table>

如何删除图像创建的空白区域？

3 个答案: