最小化浏览器时的 CSS 容器 [关闭]

Question

我已经开始设计一个 Web 模板，但我在容器中遇到了一个问题，每当我最小化浏览器时，它看起来很混杂，然后转到另一个地方。我试图让它看起来像记事本++。

你可以在这里查看我的输出：http://jsfiddle.net/Razor_01100/TLkTt/embedded/result/

CSS

body {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333;
    padding: 0;
    margin: 0;
}

#wrapper {
    position: relative;
    height:auto !important;
    height:100%;
    min-height:100%;
    min-width:1000px;
}
#container {
    width: 300px;
    float: left;
    background-color: #0096ff;
    margin: 0;
    padding: 0;
}
#container2 {
    width: 200px;
    float: left;
    background-color: #5f5f5f;
    margin: 0;
    padding: 0;
}
#container3 {
    width: 849px;
    float: left;
    background-color: #313131;
    margin: 0;
    padding: 0;
}
ul#nav {
    list-style-type: none;
}
.text-container3 {
    color: white;
}
#footer {

}

HTML

        <div id="wrapper">
            <div id="container">
            </div>
            <div id="container2">
                <div id="nav-wrapper">
                    <ul id="nav">
                        <li><a href="#" title="">Home</a></li>
                        <li><a href="#" title="">About us</a></li>
                        <li><a href="#" title="">X-Design</a></li>
                        <li><a href="#" title="">X-Photography</a></li>
                        <li><a href="#" title="">X-Programming</a></li>
                        <li><a href="#" title="">X-Event</a></li>
                        <li><a href="#" title="">Contact us</a></li>
                    </ul>
                </div>
            </div>
            <div id="container3">
            </div>
            <div id="footer">
            </div>
        </div>

Answer 1

我想你只是设置了你的包装器 div css

# wrapper
{
position:relative;
margin:0 auto;
}

我希望这会有所帮助

Answer 2

这有两个部分，第一个是浮动，第二个是定位。

您正在使用浮点数。如果它们的总大小不适合窗口，它们会自动移动自己以适应它们可以填充的任何空间。 Aka，如果您更改窗口大小并导致不良格式，它们会移动。我建议使用display:block（将元素放在自己的一行上）或display: inline-block; vertical-align: top;（获得与浮点数相同的功能）。您获得了更多控制权，通常这是更好的做法。

但是，这不会解决对齐问题，因此转到第 2 部分，位置。由于您的包装器是相对的，您可以将所有子 div 设为绝对位置：

#wrapper div{ 
display: inline-block; 
vertical-align: top;
position: absolute; 
}

Absolute 将 div 放在您想要的相对于父级的确切坐标处。然后手动设置孩子的位置（#container、#container2、#container3）。这将确保无论屏幕大小如何变化，它们都不会移动。

#container { left: 0px; ... }
#container2 { left: 300px; ... }
#container3 { left: 500px; ... }

您可能还想添加“top”（默认为 0px），但请随意玩弄。