Question

我的问题很难解释，但很容易理解。让我们用一个非常简单的示例来想象问题：

我有一个<div>和一个height=100px。在该<div>中，我想要6行文本。因此从数学上讲，我的line-height等于16.666666666...px。

问题是css将每行的line-height舍入到16.7px。结果，我的最后一行将显示在div内部的“溢出”中。（使用A4尺寸，有时会隐藏两行）

是否可以编写

之类的脚本

$lineHeight = 16.66666666 ;
line1 starts at 1 * $lineHeight;
line2 starts at 2 * $lineHeight;
line3 starts at 3 * $lineHeight;
....

为了坚持我的line-height网格？

我会说最好的方法是在JS中循环编写脚本。

我对这个简单的问题很困惑。...

Answer 1

使用弹性盒，而忽略线高16.666666667。

.container {
  display: flex;
  height: 100px;
  border: 1px solid;
  flex-direction: column;
  justify-content: space-between;
}

.container div {
  font: 10px/10px 'Arial', sans-serif;
}

<div class="container">
  <div>child 1</div>
  <div>child 2</div>
  <div>child 3</div>
  <div>child 4</div>
  <div>child 5</div>
  <div>child 6</div>
</div>

这适用于任何数量的儿童以及任何高度的容器。只要孩子的身高加起来不超过容器的高度。

精确的线高，如16.666666666 ... px

1 个答案: