0

ページの左側に 1 つの div、ページの右側に 1 つの div を配置しようとしています。

コード ( Code Here ) は、jsFiddle にある場合は正常に動作します。ただし、私の Web サイトで同じコードを使用すると、「右」の div は右に浮かず、境界線がなく、「左」の div の上に配置されます。

何か案は？

4

1 に答える 1

1

Webページを適切にクロスブラウザで表示するには、解決すべき多くの問題がありますが、目前の問題の解決策を提供するために、このフィドルの例を見ることができます。

関連する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を、クラスを使用するdivにラップしてclearfix、その特定のポイントでドキュメントフローをクリアします。これにより、 WebページにCSSリセットを適用してもしなくても、#rightと#leftを適切な場所に配置できるようになります。

HTML5のCSSリセットを取得します：http： //html5reset.org/

Floated Elementsについて読む： CSS Float | CSSfloatプロパティ

于 2012-05-12T23:06:19.627 に答える