1

我需要能够在特定列（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;但也没有用。

有任何想法吗？

4

3 回答 3

2

使用您的代码：

<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 标签。

于 2013-02-04T13:04:24.997 回答
1

您的 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

于 2013-02-04T13:01:35.457 回答
0

这很容易做到。

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 示例

于 2013-02-04T13:04:05.550 回答