1
私はクライアントのためにサイトをリマスタリングしています。 Iveはいくつかのことを読んで、clearfixと呼ばれるメソッドを見つけました。私はそれを読んだので、私はそれを一杯するつもりでした。通常、私はそれmargin:0 auto;を中央うCSSを使用して要素を中央に配置できないようにするにはどうすればいいのですか？
を働いたが、これはもはや作品clearfixを実施していない、私はそれに打撃私は要素を中心に私の方法を見つける午前を与えていることを今
。だから私は同じ論理を適用する手段を探していますが、方程式にはclearfixを入れておきます。私は新しいブラウザで動作するかもしれないものをいくつか見つけましたが、古いもので動作するかどうかはわかりませんし、他のものを行うためにハッキングすることなくできるだけクロスブラウザに準拠させようとしています。私がサイトをリマスタリングしている多くの理由のうちの1つです。参照用
これは、以前にメイン含む要素を述べたように、私はCODEを表示するように編集 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の方法であることは、その "中心" 失いますその場所にclearfixクラスを適用したときの位置です。私が浮動要素を持っている親要素を取ることを理解してからclearfixの全体のポイントは、その中で最大の浮動要素の高さに要素を調整することです。ここで私はそれがマージン：0オート;そうでなければ提供されたクラスを介して同じ要素に渡されます。
あなたはいくつかのコードをポストおよび/またはhttpを作成するために、気になります。 //jsfiddle.netの例？ – Javaguru
ソースを表示するように編集されました.. – chris