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

lbhl

/ Y7 Q5 {: ~/ l9 C- H- C. S' M
今天词典排版遇到一个棘手问题，因我是CSS菜鸟，可能高手看一下一分钟就解决了，故发帖在此求助：

! `& E: P1 H- c; K<div class = first> XXXXXX </div>      （英文例句）
<p class = cn> XXXXXX </p>             （例句翻译）
$ P0 N3 |$ u* C2 {8 d: w<div class = second> XXXXXX </div>  （同义词）
<div class = third> XXXXXX </div>     （同义词）
: ~7 {; Z' w. }1 s2 N2 @% |, X
1 b! c" |) Y3 x; s& k6 E2 z- h问题的背景是：第1个div标签内容是英文例句；p标签内容是例句翻译；第2,3个div标签是两个同义词

现在想达到的效果是：
' N$ w+ y0 D6 t& ~+ S* ~. h英文例句 例句翻译
同义词1 同义词2

' f& h1 r3 _" d3 L( ]( p$ N已经试验通过以下两条语句 div.first, p.cn {display: inline} 可以让第一行显示效果实现。但无法做到第二行的要求：要想让第2个和第3个div标签并排同行就得两个同时设置成inline，而要第2个div换行到第2行而不是在第1行显示又必须设置成block —— 这是两个相互矛盾的要求！

望高人指点！

+ q' G( q) ~. L( p, U

4 `& _4 o" V! w1 w: E3 R8 a; Z  ~
- x5 E$ e8 y  U, x0 N7 E% Z1 i

mtaa

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

tinglongwei

看了好久，你是要顯示成這樣嗎？
英文例句 例句翻译
6 y0 D( Y& g: ]9 r! l同义词1 同义词2
& z2 I, I" d- ]# }
如果是這樣：
.first, .cn, .second, .third {
5 H; P) N" G; e6 m3 @        display:inline;
8 X% q( i; a5 I+ n- b) B$ V* ^}
.second::before{
" @. X- T7 a, ~; C        content: "\a";
* P' w& [1 E# |* ]2 V        white-space: pre;
' M! C3 X& n0 w! C$ Q        line-height: 2em; <--- 可控制空行間距
# N- R/ I( o' _, y+ N! R0 f}

) \5 v" Q) p/ ]% b- X8 ?

lbhl

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

! N! `# j4 x# _4 Z( r, M- |不愧为高手啊，一条语句解决了我半天没解决的问题。赞一个！