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

有两个部分这一点，首先是花车，第二正在定位。

您正在使用浮动。如果它们的总尺寸不适合窗户，这些自动移动以适应它们可以填充的任何空间。也就是说，如果您更改窗口大小并导致不良格式化，它们会移动。我会推荐使用display:block（将自己的一行放入一个元素）或display: inline-block; vertical-align: top;（以获得与浮点相同的函数）。你有更多的控制权，一般来说这是更好的做法。

但是，这不会解决对齐问题，所以到第2部分，位置。由于您的包装是相对的，你可以让所有的孩子div的绝对位置：

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

绝对会将分隔上的精确坐标，你相对于父想要的。然后手动设置孩子的位置（＃容器，＃容器2，＃容器3）。这将确保无论屏幕大小如何更改，它们都不会移动。

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

您可能还想添加“顶部”（默认为0px），但可以随意播放。

Answer 2

我想你刚才设置您的包装股利 CSS

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

我希望这将有助于