代码之家 › 专栏 › 技术社区 › Tamirlyn

CSS文本的中心列

css-multicolumn-layout css

Tamirlyn · 技术社区 · 7 年前

我有一些a<div>以下类别:

.lyrics
{
    /* position */
    margin: 40px;

    /* text */
    font-size: 18px;
    text-align: center;
    column-width: 300px;
    column-gap: 0;
    column-fill: auto;
    height: 420px;
    max-height: 420px;
}

如果歌词填满了3列,看起来不错。但是,如果歌词填充了两列,则第三列的空间为空。

有没有办法保持3列歌词的原样,但将2列歌词居中,保持列间距不变,而不用在javascript中切片歌词并自行处理布局?

https://jsfiddle.net/udc9d1go/2/
2列的错误行为: https://jsfiddle.net/45f23o82/

2 回复 | 直到 7 年前

Johannes 7 年前

您可以尝试删除 height 容器的设置。这样,高度将是动态的,即根据内容而定,如果内容是简单的文本(以行为单位,而不是以单独的块为单位),则应在三列中均匀分布。

Tamirlyn 7 年前

calculateMarginForLyrics = function(lyrics)
{
    // count <br /> tags and count </p> tags twice (except last one)
    var nLines = lyrics.match(/<br \/>/g || []).length + (lyrics.match(/<\/p>/g || []).length - 1) * 2;

    if (nLines <= 12) // fits in one column
        return 350;
    else if (nLines <= 24) // fits in two columns
        return 200;

    // fits in three columns
    return 40;
}

JSFiddle