html - 缩小时如何防止网站结构发生变化？

Question

这是我的 HTML:

<div style="height:50px">

    <div tabindex="0" class="banner" onclick="location.href='Home.html'">
        Page 1
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 1.html'">             
        Page 2
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 2.html'">
        Page 3
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 3.html'">
        Page 4
    </div>

</div>

还有我的 CSS:

.banner {
    background: orange;
    color: aqua;
    float: left;
    width: 298px;
    height: 50px;
    vertical-align: top;
    border: 1px solid #000000;
    text-align: center;
    font-family: Garamond;
    font-size: x-large;
    display: table-cell;
    vertical-align: middle;
    line-height:50px;
    cursor:pointer;
    font-weight:bold;
}

我网站的正文是 1200 像素宽。网站结构似乎在不同尺寸的屏幕(从我检查过的计算机)和所有主要浏览器上都能正常工作。但是，当缩小时，在所有设备上，最右侧会下降并向左移动(在第一个 下方)。有没有办法做到这一点没有任何重大困难？ (时间在这里是一个问题，这就是为什么我只想要一个简单的解决方案(如果可能的话))。如果没有简单快捷的方法来做到这一点，请不要担心，我会保持原样。

Answer 1

简单的回答是，你不能。没有 CSS 调整或 JS 检测缩放。