请教以下横竖排混排下的宽度问题

[竹城的梦]

要实现的效果是左列竖排，右栏横排，如下图。

问题在于，左列的内容可能会很长，右栏又可能会很短，就会很丑，比如

或者当窗口高度不够时，因为左栏设置了固定宽度，文字就覆盖到右栏了，比如

这个问题在副词条中更明显，因为整体的高度由左右的最高高度决定，但左边是竖排，很容易过高。比如下图中展开的第一个高度合适，但下面那个就过高了。

（整页html+css+js示例：https://jsfiddle.net/lilysirius/4rmw28ds/702/#&togetherjs=DKbg93QOKR）

目前使用的排版（其效果为以上截图），核心框架是左右都是div，

.left {width: 1.5em; writing-mode: vertical-lr; text-orientation: sideways-right;} 
.right {margin-left: 2.5em;}

如果换为

.left {max-height: 10em; display: inline-block;} 
.right {display: inline-block;}}

当右栏的内容过多时，不能实现左右两栏，

若把右栏改为inline，高度超过左列高度后，就会从最右边开始排。

我觉得比较理想的情况是给左列设置一个最高高度，而它的宽度、在其基础上右栏的位置能够自动决定。但可能是横竖混排的问题，我尝试了很多很多双栏的不同实现方式，都无法解决这个问题。不知道大家有没有什么想法？

[alexpeng]

用表格可以解决吗，tr，td

[Fancy]

稍微复杂的布局，得用 flex 才方便。

[竹城的梦]

试过了，直接用的话第二个td会直接排在第一个下面，不能排成两列。我想可能是第一个td改变了行文方向，但把其他元素都指明是writing-mode: horizontal-tb;没有任何效果。应该还需要额外的设置

[竹城的梦]

道理是这个道理，问题是左右的文字方向不同，自动计算的高度和宽度不适用，呈现的不是都是横排的情况下flex的效果。在哪里应该还需要设置一下。

[alexpeng]

td 内再套一层标签，不直接设置 td 的显示方向。如何？

[竹城的梦]

套了标签在第一个td的内层，在内层设置竖排，文字才会显示为竖向，不套的话只改变td的堆积方向，即两个td竖向堆积，文字仍未横排。但不管我怎么套，td始终竖向堆积，不能改回横向的

[Fancy]

我算是有点明白你的需求了。你要的布局，flex弹性盒子最适合不过～但是你说的竖排左栏高度会过长，你想怎么处理？设置最大高度，然后溢出部分隐藏？换行？滚动？你可以再简要概括下，你最终想要的效果，我可以再帮你看看。（还是推荐你网上查看下 flex 布局详解，flex的很多特性，可以实现很多灵活的布局，您自个儿摸索下和解决问题，效果会更好，当然不明白的地方可以互相学习和交流）

[竹城的梦]

抱歉我之前对需求描述得不清楚，我觉得最理想的情况是，设定一个预设高度，左边的高度为预设高度和右边高度之间的最大值。左边高度过高时，超出的部分由换行来显示。

谢谢推荐，正在学习当中。我都是用到啥去学啥，所以对很多功能都不知道。

[Fancy]

flex 布局，flex 子项目的高度默认取决于其中值最大的一个。按照你的需求，你只需要给左栏设置最小高度，然后设置 word-break:break-all 实现文本溢出换行，大概应该就能实现你说的效果了。我没实际测试，你那上面的示例网页挂了，你自己试试看呢。

[竹城的梦]

链接已更新：https://jsfiddle.net/lilysirius/oc9yup4L/

万分感谢！非常好用！是我理想的效果。为了好认一点我用了word-break:break-word。效果如下

核心html、css如下

/*主词条*/
<div class="flex-container">
    <div class="left" lang="mn-hdm"></div>
    <div class="right"></div>
</div>

/*副词条，默认隐藏*/
<div class="subgloss">
    <div class="flex-container">
        <div class="left" lang="mn-hdm"></div>
       <div class="right"></div>
    <div>
</div>

``
.flex-container {display: flex;}
.left {max-height: 8em; word-break: break-word;}

.subgloss {display: none; overflow: hidden; font-size: 85%;}
.subgloss .left {max-height: 4em;}

*:lang(mn-hdm) {writing-mode: vertical-lr; text-orientation: sideways-right; font-family: ‘Mongolian Baiti’; font-size: 195%; vertical-align: top;}

[竹城的梦]

有个细节还想请教一下，下面这种情况

右栏没有超过左栏的最大高度，而左栏由于换行分词的原因，下面就有一段空白。

我试过fit-content和display这两个选项了，都没有效果

[Fancy]

这个较大的空白区域，是盒子设置了最大高度的情况下，元素长度溢出而选择以根据单词换行的方式来处理的缘故。就这个图例，第二个词，实在塞不下剩余的空间，那就只能把剩下塞不下的空间空着，换到另一行显示了。这也是没办法的事情

[竹城的梦]

原理我也明白了。竖排就是有很多麻烦，要是横排的话，行末由于分词换行产生的空白在视觉上就没这么大的影响。谢谢您的回复，我学到了不少，现在这个效果我也已经很满意了

[竹城的梦]

谢谢推荐！书我下载到了，浏览了一下觉得很清晰，有时间时仔细读读