請教 html css 分欄的語法

喬治兄 · 发表于 2019-3-25 23:29:58

本帖最后由喬治兄于 2019-3-25 23:31 编辑

因想把字表分成兩欄, 想要達成如圖示
最簡易的 html css 分欄的語法
請各位先進同好不吝賜教.........謝謝!

VimVim · 发表于 2019-3-26 09:07:42

NavTextColumn.zip (54.65 KB, 下载次数: 10)

jonah_w · 发表于 2019-3-26 00:05:04

可以试试<table><tr><td></td><td></td></tr></table>

两栏写在两个<td>标签里

p.s. 前端方面我也不熟悉…

kriskr · 发表于 2019-3-26 00:13:03

乔治兄，我给你发的那个demo你看下，我是分为上下两栏，加了<kk>标签的应该符合你的预期的

喬治兄 · 发表于 2019-3-26 01:36:23

jonah_w 发表于 2019-3-26 00:05
可以试试

两栏写在两个标签里

jonah_w 兄:
這方法複雜了
等於是每個詞條都要加標簽

喬治兄 · 发表于 2019-3-26 01:38:53

kriskr 发表于 2019-3-26 00:13
乔治兄，我给你发的那个demo你看下，我是分为上下两栏，加了标签的应该符合你的预期的 ...

kriskr 兄:
能否是直立式的兩欄
希望像圖示一樣
但希望標簽是簡單點的

kriskr · 发表于 2019-3-26 07:52:11

喬治兄发表于 2019-3-26 01:38
kriskr 兄:
能否是直立式的兩欄
希望像圖示一樣

方法二：左面float，右面没有变化
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
#left{
  width: 200px;
  height: 200px;
  float: left;
  background-color: lightblue;
}
#right{
  height: 200px;
  background-color: pink;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
结果如下：
如果右面有内容，还是会在粉红区域内显示，不会被蓝色区域覆盖掉

oversky · 发表于 2019-3-26 08:13:22

要指定那个字在那一栏吗？

喬治兄 · 发表于 2019-3-26 09:35:21

本帖最后由喬治兄于 2019-3-26 09:54 编辑

VimVim 发表于 2019-3-26 09:07

感謝 VimVim 兄提供完美解答, 您這個簡單多了
如此小弟也能照仿就可

Thanks Again

另外請教是否可以實現
讓那個作用左右的框框隨著單字在哪邊就亮哪邊
如圖:
也就是讓 Active 那欄邊框變紅色

喬治兄 · 发表于 2019-3-26 09:56:55

kriskr 发表于 2019-3-26 07:52
方法二：左面float，右面没有变化

test

kriskr 兄::
邊框變紅色
怎麼實現呢?

kriskr · 发表于 2019-3-26 10:05:41

喬治兄发表于 2019-3-26 09:56
kriskr 兄::
邊框變紅色
怎麼實現呢?

border-color: red

喬治兄 · 发表于 2019-3-26 10:18:06

kriskr 发表于 2019-3-26 10:05
border-color: red

kriskr 兄:
這樣是固定的吧
我想要的是在單字在哪一欄就亮哪欄是紅色的邊框

kriskr · 发表于 2019-3-26 10:30:20

喬治兄发表于 2019-3-26 10:18
kriskr 兄:
這樣是固定的吧
我想要的是在單字在哪一欄就亮哪欄是紅色的邊框

乔治兄：你不是已经用<mark>标记了对应的高亮单词？

喬治兄 · 发表于 2019-3-26 10:33:23

kriskr 发表于 2019-3-26 10:30
乔治兄：你不是已经用标记了对应的高亮单词？

是的,就是想搞看看能否有方法實現邊框也跟著 highlight

kriskr · 发表于 2019-3-26 10:55:00

喬治兄发表于 2019-3-26 10:33
是的,就是想搞看看能否有方法實現邊框也跟著 highlight

用正则应该可以

喬治兄 · 发表于 2019-3-26 11:05:51

kriskr 发表于 2019-3-26 10:55
用正则应该可以

kriskr 兄:
那也就是說需以<mark>為判斷
能否以 VimVim 兄所提供的例子為基礎提供 css
和 html , 和正則如何替換或加標簽

kriskr · 发表于 2019-3-26 11:08:42

喬治兄发表于 2019-3-26 11:05
kriskr 兄:
那也就是說需以為判斷
能否以 VimVim 兄所提供的例子為基礎提供 css

好，等我有空帮你研究下，根据mark定位到需要高亮的区域，然后只要选中就可以标签，然后就可以CSS控制加你想要的bordercolor了

喬治兄 · 发表于 2019-3-26 11:26:18

kriskr 发表于 2019-3-26 11:08
好，等我有空帮你研究下，根据mark定位到需要高亮的区域，然后只要选中就可以标签，然后就可以CSS控制加 ...

kriskr 兄:
謝謝啦 ! css 千萬越簡單越好, 太難的真看不懂怎麼改來應用

VimVim · 发表于 2019-3-26 16:43:45

本帖最后由 VimVim 于 2019-3-26 17:17 编辑

喬治兄发表于 2019-3-26 09:35
感謝 VimVim 兄提供完美解答, 您這個簡單多了
如此小弟也能照仿就可

目前只用css是无法实现的，因为there are no parent selectors in CSS, not even in CSS3：https://css-tricks.com/parent-selectors-in-css/ ，更多讨论：https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector

因此，只能借助javascript，其缺点是增加与其他词典javascript冲突的可能性，无论怎样，给你一个解决方案。与之前的区别是：html中增加了两行javascript语句，以及多了一个jquery文件。

NavTextColumnNew.zip (84.37 KB, 下载次数: 5)

喬治兄 · 发表于 2019-3-26 18:08:53

VimVim 发表于 2019-3-26 16:43
目前只用css是无法实现的，因为there are no parent selectors in CSS, not even in CSS3：https://css-tr ...

謝謝 VimVim 兄再度提供一套解答方法
感恩

[求助] 請教 html css 分欄的語法

本帖被以下淘专辑推荐: