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

绝对将div放在您想要的与父级相关的精确坐标上。然后手动设置子项的位置（#container，＃container2，＃container3）。无论屏幕大小如何变化，这都将确保它们不会移动。

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

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

最小化浏览器混乱的CSS容器

2 个答案: