Question

我试图在页面左侧有一个div，在页面右侧有一个div。

代码（Code Here）在jsFiddle中工作正常;但是，当我在我的网站上使用相同的代码时，“右”div不向右浮动，没有边框，并且它将自己置于“左”div之上。

有什么想法吗？

Answer 1

为了正确地跨浏览器呈现网页，您需要解决许多问题，但为了解决手头的问题，您可以看到Fiddle Example!

相关CSS

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

相关HTML

<div class="clearfix">
  <div id="right">Right!</div>
  <div id="left">Left!</div>
</div>

<强>解释

将#left和#right包装到使用类clearfix的div中，以清除该特定点的文档流。这应该允许#right和#left在适当的位置使用或不使用CSS重置应用于您的网页。

获取HTML5的CSS重置： http://html5reset.org/

了解Floated Elements： CSS Float | CSS float Property

左右div不能正常工作？

1 个答案: