Question

我有两列网格。左列的font-size和line-height是右列的两倍。

这个想法是：右边的第二个基线与左列的基线匹配（为了获得良好的排版）。

但是，这行不通，因为“行高”将前行和后行的行距（文本之间的间隙）分开（与行距排版相反）。

如果整个领导者都排在队伍之后或之前，那真是行得通，但是我该怎么办呢？

示例：https://www.bilder-upload.eu/upload/c7ce94-1553775633.png 那就是它的样子：https://bilder-upload.eu/upload/ce728b-1553777442.png

（我在左列的空白处尝试了此方法，但这并不精确，而且有点拙劣。在每种字体上，它的另一个值是必须猜测的！）

.grid {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 1fr 1fr;
}

.one,
.two {
    line-height: 1;
}

.one {
    font-size: 36px;
}

.two {
    font-size: 18px;
}

<body>
	<div class="grid">
		<div class="one">xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx</div>
		<div class="two">xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx</div>
	</div>
</body>

行高：行前和行后不要分开（用于良好的排版）

0 个答案: