浮动 div 在浏览器缩放时向左添加 space
Floating div adds space to left on browser zoom
我试图尽可能接近地重新创建它,在开发站点中,当它添加 space 到侧边栏的左侧时,它会破坏内容并将其移动到侧边栏的底部。这个 space 是怎么回事,它破坏了我的布局。
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;
}
只要放大到足以让 space 出现的程度。我在 Firefox 和 Safari 上遇到了这个问题。在这个 JSFiddle 示例中,您需要缩放得非常深才能解决这个问题,但在我的开发网站上,它在 Safari 上仅缩放 90%,在 Firefox 上缩放 75% 时中断。
如果您需要将其固定在左侧,请将其添加到您的 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>
好的,试试这个。
我试图尽可能接近地重新创建它,在开发站点中,当它添加 space 到侧边栏的左侧时,它会破坏内容并将其移动到侧边栏的底部。这个 space 是怎么回事,它破坏了我的布局。
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;
}
只要放大到足以让 space 出现的程度。我在 Firefox 和 Safari 上遇到了这个问题。在这个 JSFiddle 示例中,您需要缩放得非常深才能解决这个问题,但在我的开发网站上,它在 Safari 上仅缩放 90%,在 Firefox 上缩放 75% 时中断。
如果您需要将其固定在左侧,请将其添加到您的 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>
好的,试试这个。