# CSS菜鸟请教一个左右分栏排版问题

**URL:** <https://forum.freemdict.com/t/topic/6835>\
**Category:** 词典装饰排版交流分享\
**Created:** [2021 年6 月 15 日 00:41 UTC](https://forum.freemdict.com/t/topic/6835 "2021-06-15T00:41:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

作者： ![lbhl](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/l/bcef8e/32.png) [@lbhl](https://forum.freemdict.com/u/lbhl)\
发布日期： [2021 年6 月 15 日 00:41 UTC](https://forum.freemdict.com/t/topic/6835/1 "2021-06-15T00:41:40Z")

</div>

想做一个网页帮助背单词，左边是单词，右边是从牛津高阶8MDX中萃取出来的解释，意图是蒙住左边努力想单词的意思，想不起再看右边解释。当然，用不着用手去蒙，也可以用JS先隐藏右边解释，点击一下单词JS响应单击就显示该词右边的解释。  
现在遇到 了一个排版问题，左边的单词和右边的解释错位一个单词。因为是CSS菜鸟搞不出来。  
另一个问题是假如有个别单词太长左边那个DIV宽度不够显示不下，怎么处理好。如果用 word-wrap:break-word; 让单词从中间断开后面的字母到第二行去显示，这样简单粗暴不大好看。一个想法是用JS将长单词的字体单独设置得小一点。但如果不是人眼观察JS如何知道长度太长溢出了呢？进一步的想法是通过JS测试单词的字符数。哪种字体能保证字母是等宽的呢？

请大仙们多指教！

链接：[https://pan.baidu.com/s/1o6pOkIOW1q1V8H8vWcvMxg](https://pan.baidu.com/s/1o6pOkIOW1q1V8H8vWcvMxg)  
提取码：5n4c

---

<div class="post-metadata">

作者： ![hua](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/hua/32/11090_2.png) [@hua](https://forum.freemdict.com/u/hua)\
发布日期： [2021 年6 月 15 日 01:16 UTC](https://forum.freemdict.com/t/topic/6835/2 "2021-06-15T01:16:36Z")

</div>

上传到本站，不要用百度网盘，我不是每次都想点进去百度网盘的。

> [@lbhl](#):
>
> 左边的单词和右边的解释错位一个单词。

css中增加如下三行即可。

```css
.word-line {
	overflow: auto;
}

```

 ![image](https://forumcdn.freemdict.com/uploads/default/original/2X/1/1b87af55af21f0442735ed71ff56e13b7f597485.png)

> [@lbhl](#):
>
> 这样简单粗暴不大好看

我觉得好看，挺好的。

> [@lbhl](#):
>
> 字母是等宽

用等宽字体，比如：Courier， DejaVu Sans Mono

---

<div class="post-metadata">

作者： ![lbhl](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/l/bcef8e/32.png) [@lbhl](https://forum.freemdict.com/u/lbhl)\
发布日期： [2021 年6 月 15 日 02:41 UTC](https://forum.freemdict.com/t/topic/6835/3 "2021-06-15T02:41:07Z")

</div>

> [@hua](#):
>
> ```auto
> .word-line {
> overflow: auto;
> }
> 
> ```

管用！解决问题了。多谢大师指教！