html - 调整窗口大小时，HTML类更改位置

我正在尝试设计一个简单的网页，其设计看起来像this。

但是我还试图使网站适合几乎所有大小的窗口，当这种情况发生时，当窗口大小小于这两个窗口的总和时，.gameInfo类就会跳到.playerList类的顶部，因此结果最终看起来像this。

显然，这看起来很丑陋，我的目标是尝试使.gameInfo和.playerList尽可能平行。我的以下代码如下所示：

index.html：

    <body>
    <div id="container">
        <div class="gameState">
        </div>

        <div class="gameInfo">
        </div>

        <div class="playerList">
        </div>
    </div>
</body>

style.css

body{
    background-color: #FAF7F8;
    font-family: "Calibri",  sans-serif;
    margin: 0px;
    padding: 0px;
}

#container{
    width: 89%;
    margin: 0 auto;
}

.playerList{
    float: right;
    background-color: #EDEDED;
    border: 1px solid;
    border-color: #D4D4D4;
    width: 123px;
    height: 340px;
    text-align: center;
    font-size: 45px;
    color: black;
}

.gameInfo{
    float: left;
    width: 89%;
    background-color: #EDEDED;
    border: 1px solid;
    border-color: #D4D4D4;
    height: 340px;
}

.gameState{
    background-color: #EDEDED;
    margin: 12px auto 12px auto;
    border: 1px solid;
    border-color: #D4D4D4;
    width: 100%;
    height: 64px;
    text-align: center;
    font-size: 45px;
    color: black;
}

最佳答案

好吧，您正在混合固定宽度和基于百分比的宽度，所以我认为这是预期的行为。

如果.gameInfo拥有页面的89％，则.playerList最多可获得11％。问题是.playerList具有固定宽度（123px），因此，当该宽度大于页面.gameInfo的11％时，将无法与其并排放置。

编辑：
这是正确的固定流体的布局：

<body>
    <div id="container">
        <div class="gameState"></div>
        <div class="playerList"></div>
        <div class="gameInfo"></div>
    </div>
</body>

body{
    background-color: #FAF7F8;
    font-family: "Calibri",  sans-serif;
    margin: 0px;
    padding: 0px;
}

#container{
    width: 89%;
    margin: 0 auto;
}

.playerList{
    float: right;
    background-color: #EDEDED;
    border: 1px solid;
    border-color: #D4D4D4;
    width: 123px;
    height: 340px;
    text-align: center;
    font-size: 45px;
    color: black;
}

.gameInfo{
    margin-right: 130px;
    background-color: #EDEDED;
    border: 1px solid;
    border-color: #D4D4D4;
    height: 340px;
}

.gameState{
    background-color: #EDEDED;
    margin: 12px auto 12px auto;
    border: 1px solid;
    border-color: #D4D4D4;
    width: 100%;
    height: 64px;
    text-align: center;
    font-size: 45px;
    color: black;
}