0

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

代码（此处的代码）在 jsFiddle 中运行良好；但是，当我在我的网站上使用相同的代码时，“右”div 不会向右浮动，没有边框，并且它会将自身置于“左”div 之上。

有任何想法吗？

4

1 回答 1

1

为了正确地跨浏览器显示网页，您有很多问题需要解决，但是要为您手头的问题提供解决方案，您可以查看这个Fiddle 示例！

相关的 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将and包装#right到一个 div 中，该 div 使用该类clearfix来清除该特定点的文档流。无论是否对您的网页应用 CSS 重置，这应该允许#rightand位于其正确位置。#left

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

阅读浮动元素： CSS Float | CSS 浮动属性

于 2012-05-12T23:06:19.627 回答