1

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

但是我也试图让网站适合几乎任何大小的窗口，当发生这种情况时，当窗口大小小于这两个窗口的宽度时，.gameInfo类会跳到类的顶部，所以结果最终看起来.playerList像这样。

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

索引.html：

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

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

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

样式.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;
}
4

3 回答 3

0

好吧，你混合了固定宽度和基于百分比的宽度，所以我认为这是一种预期的行为。

如果.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;
}​
于 2012-12-09T02:32:55.323 回答
0

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

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

这样，您可以设置或更改浏览器在一定尺寸下的尺寸和位置。这很容易，也是当今的趋势之一。

于 2012-12-09T02:37:52.320 回答
0

问题是你混合了两种宽度，像素和百分比。当你缩放浏览器窗口和容器 div 时，你留给你的 11%.playerList会比123px某个时候少。

我要说的最简单的解决方案是给.gameInfoa (由于边框而margin-right:30px;比宽度多一点，并在它们之间留一点空间。您还必须删除 的 width 和 float 属性，以便它出现在下一个并占用所有水平可用的空间（并且您必须使浮动在html中排在第一位）。.playerInfo.gameInfo.playerInfo.playerInfo

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

编辑：一分钟前与 rdiazv 相同的解决方案，但我将把它留在这里以获得更广泛的解释和 jsfiddle 链接。

于 2012-12-09T02:39:34.587 回答