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

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

image

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

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

image

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

整页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,高度超过左列高度后,就会从最右边开始排。

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

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

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

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

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

1 Like

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

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

1 Like

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

1 Like

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

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

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

1 Like

链接已更新: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这两个选项了,都没有效果

1 Like

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

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

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