任意相邻div周围的边界，即使边界正在跨越

Question

我有一个中文句子，每个字(和它的拼音)都生活在一个div中。现在，不同的字符可以形成不同的单词，我想在字符周围创建边框，以显示它们可能形成的单词。棘手的是，有时不清楚哪个词是真正形成的，所以可能会有交叉的圆圈。

以下面的例子为例，浴华的小说“活着”的第一句话:我比现在年轻十岁的时候，获得了一个游手好闲的职业，去乡间收集民间歌谣。

在第二部分中，有三个字"获得了“可以构成"获得”或"得了“。要指出这一点，我希望在"获得“周围设置一个边框，而在"得了”周围设置一个边框。

不幸的是，我不能发布一个图片，因为我没有10个声誉。

问题是我认为普通的div是不够的，因为div是交叉的，这是不可能的。表的布局太复杂了。我也不想使用JavaScript动态分配矩形，因为我想同时显示所有的单词。也许HTML5画布是解决方案吗？

以下是div的结构(只有三个示例)：

<div class="hanzi_with_pinyin"><div class="hanzi color4">获</div><div class="pinyins_div"><div class="pinyin_div color4">huo4</div></div></div>
<div class="hanzi_with_pinyin"><div class="hanzi">得</div><div class="pinyins_div"><div class="pinyin_div color2">de2</div><div class="pinyin_div color5">de5</div><div class="pinyin_div color3">dei3</div></div></div>
<div class="hanzi_with_pinyin"><div class="hanzi">了</div><div class="pinyins_div"><div class="pinyin_div color5">le5</div><div class="pinyin_div color3">liao3</div><div class="pinyin_div color4">liao4</div></div></div>

是否有一种简单的方法可以让我在相邻的div周围创建矩形，即使矩形是交叉的？

Answer 1

使用表边框以及<tr>和<th>标记，如下所示。

https://www.html.am/html-codes/tables/table-border.cfm

示例：

<table border="1">
<tr>
<th><div class="hanzi_with_pinyin"><div class="hanzi color4">获</div><div class="pinyins_div"><div class="pinyin_div color4">huo4</div></div></div></th>
</tr>
<tr>
<td><div class="hanzi_with_pinyin"><div class="hanzi">得</div><div class="pinyins_div"><div class="pinyin_div color2">de2</div><div class="pinyin_div color5">de5</div><div class="pinyin_div color3">dei3</div></div></div></td>
</tr>
<tr>
<td>
<div class="hanzi_with_pinyin"><div class="hanzi">了</div><div class="pinyins_div"><div class="pinyin_div color5">le5</div><div class="pinyin_div color3">liao3</div><div class="pinyin_div color4">liao4</div></div></div></td></tr>
</table>

您也可以通过使用css边框来进一步定制它。

border.asp