0

I have multiple rows of elements that i want to align vertical so that on different resolutions, the first screen (without scrolling) would be the same for each of them.

Luckly, i have some limits that i have to respect 800px and 1200px (vertical resolution). So only between those two values my margins have to increase/decrease proportionaly. If bigger or smaller than that interval the screen remains as it is to one of those limits.

Unfortunely, based on requirements i can't use media-queries or javascript for calculating this, so it has to be a pure CSS solution.

Is there a way of doing that? Without affecting height, width or left/right margins of the elements.

Or is there a javascript way of modifying that without injecting inline CSS property? I haven't heard of that but could it be possible to modify CSS files?

EDIT A non-table solution would be prefered.

4

1 に答える 1

0

JavaScript がありませんか? これを達成できる唯一のマークアップ（ページを垂直に+均等に分割）は<table>

ここで例をいじりました

最初に body と 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 を使用する場合は、css3の「完全にサポートされていない」calc()を確認してください。

于 2013-03-18T15:04:14.413 に答える