我的问题很难解释,但很容易理解。让我们用一个非常简单的示例来想象问题:
我有一个<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中循环编写脚本。
我对这个简单的问题很困惑。...
答案 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>
这适用于任何数量的儿童以及任何高度的容器。只要孩子的身高加起来不超过容器的高度。