Question

所以我一直在html5和css3的网站上工作，但我遇到了一个问题。我的包装器是960px，在该包装器中我有2个DIV，1个向左浮动，并且那个的大小是240px，1个向右浮动，大小为695px。在浏览器中有一个缩放功能，我假设模拟不同的分辨率。因此，当我缩小几次点击时，我的右侧浮动div，扩展并进入我的左浮动div下方。看一下截图：

正常：http://puu.sh/iMCEn/eff5baff4d.png
放大：http://puu.sh/iMCGQ/98145b5788.png

这是我的CSS：

* { margin:0; padding:0;}

@font-face {
    font-family: reckoner;
    src: url(../fonts/Reckoner.ttf);
}

@font-face {
    font-family: champ;
    src: url(../fonts/champ.ttf)
}

body {
    background-color: #333333;
}

#wrap {
    width: 960px;
    margin: 150px auto 0 auto;
}

#banner {
    color: #e5e5e5;
    font-family: reckoner;
    font-size: 65px;
    text-shadow: 0px 0px 10px black;
    margin-left: 10.5px;
}

#main {
    height: auto;
    overflow: auto;
    background-color: #1a1a1a;
    border: 1px solid #404040;
    outline: 2px solid black;
}

#nav {
    font-family: champ;
    width: 240px;
    float: left;
}

#nav ul {
    list-style-type: none;
}

#nav ul li {
    text-decoration: none;
    background: #262626;
    padding: 7px;
    margin: 10px;
    outline: 1px solid #404040;
    border: 1px solid black;
}

#nav ul li:hover {
    background-color: #404040;
}

#nav ul a {
    text-decoration: none;
    color:#e5e5e5;
    font-size:17px;
    text-transform: uppercase;
    text-shadow: 0px 0px 10px black;
}

#content {
    float: right;
    width: 695px;
    min-height:500px;
    background-color: #262626;
    margin: 10px;
    outline: 1px solid #404040;
    border: 1px solid black;
}

这是HTML：

<!doctype html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <title>AAA GAMING - TRIPLE A GAMING</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="wrap">
            <div id="banner">AAA GAMING</div>
            <div id="main">
                <div id="nav">
                    <ul>
                        <a href=""><li>Home</li></a>
                        <a href=""><li>Donate</li></a>
                        <a href=""><li>Chat</li></a>
                        <a href=""><li>How To Connect</li></a>
                        <a href=""><li>Application</li></a>
                        <a href=""><li>Contact</li></a>
                    </ul>
                </div>
                <div id="content">
                </div>
            </div>
        </div>
    </body>
</html>

任何帮助将不胜感激！谢谢！

Answer 1

看起来您的main容器正在改变浏览器缩放的宽度。如果在其上设置min-width样式，它将停止缩小超过断点。我将其设置为min-width: 965px;，这似乎可以阻止缩放（至少在Chrome中）。

Answer 2

缩放功能不会模拟不同的分辨率，更好的方法是调整浏览器窗口的大小。由于四舍五入的错误，缩放因打破布局而臭名昭着，所以我不会过度担心它，但在这种情况下解决问题很容易。

我在Chrome中重复了这个问题。

漂浮物通常会像这样出现故障，因为如果发生任何事情使得物品适合漂浮物旁边的剩余空间，比漂浮元素更宽，它们会在浮动元素下面撞到。这就是这里发生的事情。一般来说，我也避免并排放置两个浮动元素。

两个基本解决方案是：

使元素变得足够窄，以至于不会发生
使用浮动之外的东西（如绝对定位）

（2）是我推荐用于新布局的长期解决方案。但是在这种情况下实现（1）的快速解决方案是改变#content元素的边距。下：

margin: 10px;

添加以下行：

margin-left: -10px;

这解决了我的浏览器在所有缩放下降到25％的问题。它也不会以任何其他方式明显地影响布局，因为它不会影响元素本身可见部分的宽度，它只影响其容器的宽度，这可能会迫使它被撞倒了。

放大浏览器中的主要内容重叠

2 个答案: