css - 负边距布局在小窗口大小上移动

Question

我的布局遇到了一个奇怪的问题，它在全窗口上看起来很好，但在我调整窗口大小时开始向右移动。

要求是有 3 个全高列，其中 2 个具有固定宽度，另一个占据其余空间。

我无法控制看起来像这样的 html：

<div id="wrapper">
  <div id="main">

     <div id="nav">
     </div>

     <div id="container">
       <div id="content">
       </div>
       <div id="sidebar">
       </div> 
     </div>        
  </div>
</div>

我想出了一种方法来使用负边距和相对定位来完成所有这些工作，效果很好，除了当窗口非常小时，整个内容会向右移动。我有一个简单的解决方案来防止这种情况吗？我也想知道为什么会发生这种情况，因为我无法解决这个问题。

JSFIDDLE：

http://jsfiddle.net/u5yJd/

Answer 1

CSS 中的两个修复：

• 在#wrapper核弹margin-left上left: 0px;
• #main添加时left: 264px;

修复了这些更改。

你#wrapper在窗口的左边，你希望你的#wrapper（在这种情况下）在窗口中，否则定位它会有点时髦。