1

特定の列 (td) の中心に正確に 1 本の黒い線を引くことができる必要があります。この列には画像が含まれているため、黒い線は画像の上にある必要があります。

私は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;
}

ここに例を示します (td の代わりに、illustrion の目的で ID #wrapper を持つ div を使用しました): 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 に答える