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

lbhl · 发表于 2020-2-16 23:15:13

本帖最后由 lbhl 于 2020-2-17 02:24 编辑

今天词典排版遇到一个棘手问题，因我是CSS菜鸟，可能高手看一下一分钟就解决了，故发帖在此求助：

<div class = first> XXXXXX </div>    （英文例句）
<p class = cn> XXXXXX </p>          （例句翻译）
<div class = second> XXXXXX </div>  （同义词）
<div class = third> XXXXXX </div>    （同义词）

问题的背景是：第1个div标签内容是英文例句；p标签内容是例句翻译；第2,3个div标签是两个同义词

现在想达到的效果是：
英文例句例句翻译
同义词1 同义词2

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

望高人指点！

mtaa · 发表于 2020-2-17 01:41:04

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

tinglongwei · 发表于 2020-2-17 00:07:30

看了好久，你是要顯示成這樣嗎？
英文例句例句翻译
同义词1 同义词2

如果是這樣：
.first, .cn, .second, .third {
display:inline;
}
.second::before{
content: "\a";
white-space: pre;
line-height: 2em; <--- 可控制空行間距
}

lbhl · 发表于 2020-2-17 02:07:18

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

不愧为高手啊，一条语句解决了我半天没解决的问题。赞一个！

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

点评