[英]Cross-Browser CSS margin and float positioning
Trying position two divs with the left one being a sidebar that is 200px wide and the right one taking up the rest of the screen. 尝试定位两个div,左边的是一个宽度为200px的侧边栏,右边的则占据了屏幕的其余部分。 I have this code as an example which works in firefox, but in webkit browsers, there is a weird margin on the right as well as the left.
我以这段代码为例,可以在firefox中使用,但是在webkit浏览器中,左右两侧都有一个奇怪的边距。 In this example code I set the container width to 600px for easy demonstration, but in actuality I won't know the width of the container div.
在此示例代码中,为了方便演示,我将容器宽度设置为600px,但实际上我不知道容器div的宽度。 I'm using doctype XHTML 1.0 Transitional.
我正在使用doctype XHTML 1.0 Transitional。
<style type="text/css">
#container {
height:50px; width:600px; background-color:black; overflow:hidden;
}
#sidebar {
height:50px; width:100px; background-color:lightgreen; float:left;
}
#content {
height:50px; margin-left:100px; background-color:lightblue;
}
</style>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
<style type="text/css">
#container {
height:50px; width:100%; background-color:black; overflow:hidden; float:left;
}
#sidebar {
height:50px; width:200px; background-color:lightgreen; float:left;
}
#content {
height:50px; background-color:lightblue;
}
</style>
Ahhh... well I had div {overflow:hidden;}
in my global css. 嗯...好吧,我在全局CSS中有
div {overflow:hidden;}
。 Setting overflow:visible
on the content div made it work. 在内容div上设置
overflow:visible
使其生效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.