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

时间:2019-03-03 11:19:24

标签: html css

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

我有一个<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中循环编写脚本。

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

1 个答案:

答案 0 :(得分:0)

使用弹性盒,而忽略线高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>

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