請教 html css 分欄的語法

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

本帖最后由喬治兄于 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. 前端方面我也不熟悉…

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

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

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

jonah_w 发表于 2019-3-26 00:05
! g' A, l! M9 a. k5 {可以试试
0 h# P$ g( n3 o) a4 p! H, n& @/ f0 Z9 Y; v
两栏写在两个标签里

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

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

kriskr 发表于 2019-3-26 00:13
/ M& b5 r! ]% y7 r2 G" x乔治兄，我给你发的那个demo你看下，我是分为上下两栏，加了标签的应该符合你的预期的 ...

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

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

喬治兄发表于 2019-3-26 01:38' J; I% x; K, `' n9 ^
kriskr 兄:
" [5 J; V/ M* _+ u9 Y( f0 P能否是直立式的兩欄
/ ?0 S7 v5 t ], J0 V希望像圖示一樣

方法二：左面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
) z% d; n- S/ T% X/ B9 r" a7 y. N方法二：左面float，右面没有变化 o5 y! D; _0 s3 v: k) ?. L

. B/ P5 a3 l6 q" }/ j6 J, ] test

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

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

喬治兄发表于 2019-3-26 09:56( k" l; O# C2 |
kriskr 兄::
4 o, x) Q' {/ }' @0 u* q邊框變紅色
! B6 E" v( l3 C. |2 L* ~0 m, u" @% `怎麼實現呢?

border-color: red

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

kriskr 发表于 2019-3-26 10:054 l$ s0 F) T* w! R2 m% a
border-color: red

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

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

喬治兄发表于 2019-3-26 10:182 ] R- {+ R- e" X! @
kriskr 兄:/ c( f/ q5 D3 f$ O8 F* [- S
這樣是固定的吧8 X" N5 I2 H. D! X( x
我想要的是在單字在哪一欄就亮哪欄是紅色的邊框

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

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

kriskr 发表于 2019-3-26 10:30; R( L6 V8 h! _% l- D/ h
乔治兄：你不是已经用标记了对应的高亮单词？

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

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

喬治兄发表于 2019-3-26 10:33& z& w- U% @% e: R; i) P1 h
是的,就是想搞看看能否有方法實現邊框也跟著 highlight

用正则应该可以

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

kriskr 发表于 2019-3-26 10:557 y+ L6 W2 f4 R: m' S w4 a, a6 g1 O
用正则应该可以

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

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

喬治兄发表于 2019-3-26 11:05
/ z8 |* ~2 U3 {( M% Okriskr 兄:
1 I# W! n% ?, s. Y) ~* w那也就是說需以為判斷) F c6 j9 s- d4 X% r/ P2 w
能否以 VimVim 兄所提供的例子為基礎提供 css

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

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

kriskr 发表于 2019-3-26 11:08% }! E8 y* @) g$ D0 K$ ]5 ^, M
好，等我有空帮你研究下，根据mark定位到需要高亮的区域，然后只要选中就可以标签，然后就可以CSS控制加 ...

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

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

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

喬治兄发表于 2019-3-26 09:35
' s& R7 H6 z! M) \6 P+ d0 n感謝 VimVim 兄提供完美解答, 您這個簡單多了" F9 M- B9 C- N7 A6 q/ O- a
如此小弟也能照仿就可

目前只用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
9 u# k+ l, i8 e, r" z* ]8 I目前只用css是无法实现的，因为there are no parent selectors in CSS, not even in CSS3：https://css-tr ...

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

		自动登录	找回密码
密码			免费注册

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

本帖子中包含更多资源

本帖被以下淘专辑推荐:

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源