1

わかりました、クライアントの 1 人のためにサイトをリマスタリングしています。何年もの間、CSS に関する限り、少し古い方法で作業を行ってきました。私はいくつかのことを読んで、clearfix と呼ばれる方法を見つけました。それについて読んで以来、試してみたいと思っていました。

試してみると、要素を中央に配置する方法が機能していないことがわかりました

通常は中央に配置しますmargin:0 auto;が、clearfix を実装すると機能しなくなります。だから今、私は同じロジックを適用する手段を探していますが、方程式に clearfix を保持しています。新しいブラウザーで動作するものをいくつか見つけましたが、古いブラウザーで動作するかどうかはわかりません。他のことをするために何かをハッキングすることなく、これを可能な限りクロスブラウザーに準拠させようとしています. それが、私がサイトをリマスタリングしている多くの理由の 1 つです。準拠している、新しいきれいなコード ベースが必要です。

参考までに、これは私が使用しているclearfixの方法です http://www.webtoolkit.info/css-clearfix.html

*コードを表示するように編集*

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[title here]</title>
<style type="text/css" media="all">
*{margin:0;padding:0;}
body{background-color:#3F3965;font-family:Verdana, Geneva, sans-serif;color:#000;}
#content_wrap{margin:0 auto;padding:0;width:800px;background-color:#FFF;}
#content_left{width:180px;float:left;}
#content_right{width:620px;float:left;}
.rounded{
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
  behavior: url(border-radius.htc);
}
.border{border:solid 2px;}
.light{border-color:#999;}
.dark{border-color:#666;}
.clr{clear:both;} /*standard clear*/
/*start clearfix*/
.clearfix:after {content: ".";display: block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix{height:1%;}
/*end clearfix*/
</style>
</head>
<body>

<div id="content_wrap" class="clearfix rounded border dark">
    <div id="content_left">left</div>
    <div id="content_right">right</div>
</div>
</body>
</html>

前述のように、主要な包含要素は、clearfix クラスを適用すると「中央」の位置を失います。私の理解によるクリアフィックスの全体的なポイントは、その中に浮動要素を持つ親要素を取ることであり、要素をその中の最大の浮動要素の高さに合わせて調整することです。これが機能する場所では、margin:0 auto; が必要だと思います。提供されたクラスを介して同じ要素でそれ以外の場合は無視されます

4

3 に答える 3

2

フローティングの子を持つ要素のコンテナーの高さの計算ミスを解決する 1 つの方法は、オーバーフロー:hidden をそれらに配置することです。コンテナ DIV の高さを計算する時点で、内部のレイアウトが準備できていないため、誤計算が発生します。overflow:hidden on container DIV は、すべての子がレンダリングされた後に高さの再計算を強制します。

<div class="container">
    <div class="child">
    Lorem ipsum
    </div>
    <div class="child">
    Lorem ipsum
    </div>
    <div class="child">
    Lorem ipsum
    </div>


.container{
    overflow:hidden;
    }
.child{
    float:left;
    width:20px;
    }

これは、いくつかのバナーやリボンのように、実際にはコンテナーの外側に配置されている要素が絶対的または相対的に配置されている場所でのみ問題を引き起こします。それ以外の場合、これはクリーンなソリューションです。

PPK には 1 つの記事があります http://www.quirksmode.org/css/clearing.html

于 2012-05-13T10:48:01.483 に答える
0

クリスの答えを拡張すると、このシナリオでは 2 つのラッパーが必要になります。

外側のラッパーはコンテナーの幅を設定し、margin: 0 auto;スタイルを適用する必要があります。

.content_center {
  width: 800px;
  margin: 0 auto;
}

次に、clearfixクラスとスタイルをコンテンツ ラッパーに適用し、その幅を100%(その親の)に設定します。

.content_wrap {
  width: 100%;
}

これがフィドルです。

于 2014-02-14T11:47:30.673 に答える
0

わかりました、私自身の質問に答えます。ここでは、質問に固有の意味で、より良いものを提供できる人は誰もいないと考えています。

私がやったのは、別の div を content_wrap div 内に配置し、この要素から clearfix クラスを削除することです。この新しい div には clearfix のクラスが与えられ、残りのコンテンツ div をラップして、意図したとおりに clearfix を適用します。

これにより、content_wrap div を希望どおりに中央に配置できました。

于 2012-05-13T21:42:49.897 に答える