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

請教 html css 分欄的語法

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

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

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





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

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

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

p.s. 前端方面我也不熟悉…{:4_96:}

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

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

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

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

两栏写在两个标签里


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

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

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

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

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 兄提供完美解答, 您這個簡單多了
如此小弟也能照仿就可
{:4_104:}
Thanks Again
{:4_105:}
另外請教是否可以實現
讓那個作用左右的框框隨著單字在哪邊就亮哪邊
如圖:
也就是讓 Active 那欄邊框變紅色

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

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

test


kriskr 兄::
邊框變紅色
怎麼實現呢?
{:4_91:}

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 兄:
這樣是固定的吧
我想要的是在單字在哪一欄就亮哪欄是紅色的邊框
{:4_91:}

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
{:4_105:}

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 , 和正則如何替換或加標簽
{:4_105:}

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 千萬越簡單越好, 太難的真看不懂怎麼改來應用
{:4_105:}

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文件。







喬治兄 发表于 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 兄再度提供一套解答方法
感恩
      {:4_104:}
页: [1]
查看完整版本: 請教 html css 分欄的語法