html - float div 在浏览器缩放时向左添加空间

Question

我试图尽可能接近地重新创建它，在开发站点中，当它在侧边栏的左侧添加空间时，它会破坏内容并将其移动到侧边栏的底部。这个空间是怎么回事，它破坏了我的布局。

HTML:

<div id="main-wrapper" class="clearfix">
    <div id="main" class="clearfix">
        <div id="sidebar-first" class="column sidebar">
            <p>Sidebar</p>
        </div>
        <div id="content" class="column">
            <p>Content</p>
        </div>
    </div>
</div>

CSS:

#main-wrapper {
  margin: 0 auto;
  width: 1094px;
}
#sidebar-first {
  float: left;
  padding: 15px 0 15px 15px;
  width: 180px;
  background-color: gray;
}
#content {
  padding: 15px 0 15px 15px;
  width: 280px;
  float: left;
  background-color: #ccc;
}

只要放大到足以让空间出现。我在 Firefox 和 Safari 上遇到了这个问题。在这个 JSFiddle 示例中，您需要缩放得非常深才能解决这个问题，但在我的开发网站上，它在 Safari 上仅缩放 90%，在 Firefox 上缩放 75% 时就会中断。

http://jsfiddle.net/fzj8n4we/

Answer 1

如果您需要将其固定在左侧，请将其添加到您的 css

    #main-wrapper 
    {
      width: 1094px;
    }
    
    #sidebar-first {
      float: left;
      padding: 15px 0 15px 15px;
      width: 180px;
      background-color: gray;
    }
    #content {
      padding: 15px 0 15px 15px;
      width: 280px;
      float: left;
      background-color: #ccc;
    }

    <div id="main-wrapper" class="clearfix">
        <div id="main" class="clearfix">
            <div id="sidebar-first" class="column sidebar">
                <p>Sidebar</p>
            </div>
            <div id="content" class="column">
                <p>Content</p>
            </div>
        </div>
    </div>

好的，试试这个。