Question

我需要能够在特定列（td）的中心下方绘制一条黑线。此列包含图像，因此黑线必须位于图像的顶部。

我在CSS中尝试这个，但是javascript就可以了。我宁愿不使用图像作为黑线。

我试过了：

.verticalLine {
    position: relative;
    float: center;
    height: 100%;
    border-right: 1px solid #000;
    z-index: 9999;
}

然后：

<td align="center" valign="center">
    <div class="verticalLine" id="verticalLine"></div>
etc.

......但这并没有显示任何内容。

我也尝试了left: 50%;和left: 428;，但这也无效。

有什么想法吗？

Answer 1

使用您的代码：

<td align="center" valign="center"><div class="verticalLine" id="verticalLine"></div>

我将使用的CSS可能如下：

td {
    position: relative;
}
.verticalLine{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    border-right: solid 1px #000;
    z-index: 9999;
}

当TD位于相对位置时，您的线可以定位absolute，这将使其脱离标准流量，并且不会影响单元格中其他元素的定位。当然，如果您使用类将position: relative应用于TD会更好，因此它不会影响所有其他TD标记。

Answer 2

你的td需要相对位置，然后你可以将你的div相对位置设置为50％并将边框放在左边：

td {
  position: relative;
}

.verticalLine {
  position: relative;
  left: 50%;    
  height: 100%;
  border-left: 1px solid #000;
  z-index: 9999;
}

此处的示例（仅使用id为#wrapper的div用于代替td的目的）：http://codepen.io/anon/pen/DBphv

Answer 3

这很容易做到。

HTML

<table>
    <tr>
        <td align="center" valign="center"><div class="verticalLine" id="verticalLine"></div><img src="http://www.ehdwalls.com/plog-content/thumbs/1440x900/animals/small/610-citten_1440x900.jpg" /></td>
    </tr>
</table>

CSS

.verticalLine {
    position: relative;
    float: center;
    height: 100%;
    width: 1px;
    background: #000;
    z-index: 9999;
}

td {
     height: 50px;   
}

我做了一个快速的jsfiddle示例： jsfiddle example

如何在图像的上方沿着列的中心绘制黑线？

3 个答案: