Question

我想要对齐多行元素，以便在不同的分辨率下，第一个屏幕（不滚动）对于每个元素都是相同的。

幸运的是，我有一些限制，我必须尊重800px和1200px（垂直分辨率）。因此，只有在这两个值之间，我的边距必须按比例增加/减少。如果大于或小于该间隔，则屏幕保持与其中一个限制一样。

不幸的是，根据要求，我不能使用媒体查询或javascript来计算它，所以它必须是纯CSS解决方案。

有没有办法做到这一点？不影响元素的高度，宽度或左/右边距。

或者是否有一种javascript方式修改它而不注入内联CSS属性？我没有听说过，但是可以修改CSS文件吗？

编辑首选非表格解决方案。

Answer 1

没有javascript？我认为能够实现这一目标的唯一标记（垂直划分页面+均匀）是<table>

我fiddled an example here

你必须首先在身体和html上触发100％的高度，

html, body {
    height:100%
}

<table style="width:100%;height:100%">
    <tr>
        <td style="color:green;background-color:pink">a&nbsp;a</td>
    </tr>
    <tr>
        <td style="color:blue;background-color:aqua">b&nbsp;b</td>
    </tr>
    <tr>
        <td style="color:red;background-color:cyan">r&nbsp;r</td>
    </tr>
</table>

玩这个，测试一下，看看这个解决方案是否适合你的情况。

否则，如果您打算使用javascript，则可以查看＆＃39; not fully supported＆＃39; css3中的 calc（）

调整边距 - 顶部/底部与屏幕高度成比例

1 个答案: