Question

我正在尝试设计一个简单的网页，其设计看起来像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;
}

Answer 1

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

如果.gameInfo占网页的89％，则.playerList最多可获得11％。问题是.playerList有一个固定的宽度（123px），所以，当它大于页面的11％.gameInfo时，它不会与它并排放置。

修改这是一个适当的流体固定布局：

<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; }

Answer 2

如果您希望页面具有响应性，可以使用@media查询解决此问题。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

这样，您可以在浏览器的特定大小下设置或更改大小和位置。它很容易，也是今天的趋势之一。

Answer 3

问题是你混合了两种宽度，像素和百分比。当您缩放浏览器窗口并因此缩放容器div时，您为.playerList留下的11％将在某个时间点小于123px。

我要说的最简单的解决方案是给.gameInfo一个margin-right:30px;（由于边界而略宽于.playerInfo宽度，并在两者之间留出一点空间。您还必须删除.gameInfo的宽度和浮动属性，以便它显示在.playerInfo旁边并占用所有水平可用空间（并且您必须使浮动{{1}首先来自html）。

在此处查看您提及的更改代码：http://jsfiddle.net/qyKny/7/

编辑：与一分钟前的rdiazv相同的解决方案，但我会留在这里进行更广泛的解释和jsfiddle链接。

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

3 个答案: