Question

尝试位置两个div，左边一个是侧边栏，宽度为200px，右边一个占据屏幕的其余部分。我有这个代码作为一个在Firefox中工作的例子，但在webkit浏览器中，右边和左边都有一个奇怪的边缘。在这个示例代码中，我将容器宽度设置为600px以便于演示，但实际上我不知道容器div的宽度。我正在使用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>

Answer 1

          <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>

Answer 2

啊......我的全球css中有div {overflow:hidden;}。在内容div上设置overflow:visible使其有效。

跨浏览器CSS边距和浮动定位

2 个答案: