请教一个词典制作css排版的换行问题

lbhl

* \2 B9 g  k# |3 L
# O' x" C: W: c3 @9 d- I3 L* ]今天词典排版遇到一个棘手问题，因我是CSS菜鸟，可能高手看一下一分钟就解决了，故发帖在此求助：
+ o/ ?% p# c7 c% k5 e
<div class = first> XXXXXX </div>      （英文例句）
<p class = cn> XXXXXX </p>             （例句翻译）
; K! n2 d/ E0 T/ G$ M<div class = second> XXXXXX </div>  （同义词）
5 ]! H& Z! I) c% G+ W/ f" o0 j<div class = third> XXXXXX </div>     （同义词）

; o- o6 c& Z' [! o* [* l$ d& c' `! C问题的背景是：第1个div标签内容是英文例句；p标签内容是例句翻译；第2,3个div标签是两个同义词
, I- I" C' z. G, t
现在想达到的效果是：
英文例句 例句翻译
# ^0 M9 ~  S7 D* A同义词1 同义词2
& c8 L  a1 v9 R% P+ u& [
已经试验通过以下两条语句 div.first, p.cn {display: inline} 可以让第一行显示效果实现。但无法做到第二行的要求：要想让第2个和第3个div标签并排同行就得两个同时设置成inline，而要第2个div换行到第2行而不是在第1行显示又必须设置成block —— 这是两个相互矛盾的要求！
0 d8 i8 G, e8 `7 X- o& u+ w: b# Y3 `
4 y+ p5 t7 e; F( x% X! [* h; S2 z望高人指点！
+ r/ V- r* w/ I7 r. f" I6 x

. G1 d( q" m7 g1 \+ z

' N) `% L  b3 T) r: L

mtaa

.second,.third{display:table-cell;}

tinglongwei

看了好久，你是要顯示成這樣嗎？
" X, R8 }" D6 V1 Z英文例句 例句翻译
4 l2 w4 w; ~& `+ J0 O6 c- o" z( N$ t同义词1 同义词2

如果是這樣：
4 ~% C4 g( ?1 Z7 o7 {/ s.first, .cn, .second, .third {
        display:inline;
}
.second::before{
        content: "\a";
# O' |* w1 ]1 c6 a2 D        white-space: pre;
. s/ u# u1 d9 K% H        line-height: 2em; <--- 可控制空行間距
}

lbhl

mtaa 发表于 2020-2-17 01:41
.second,.third{display:table-cell;}

1 F& d8 P( S+ O+ Y1 J8 ?* V不愧为高手啊，一条语句解决了我半天没解决的问题。赞一个！