Twitter BootstrapのこのCSSに相当するものは何ですか?
-
26-10-2019 - |
質問
<div style="float:left;">
column 1
</div>
<div style="float:left;">
column 2
</div>
<div style="clear:both;"></div>
私は書くのに慣れています clear:both
. 。しかし、Twitter Bootstrapで「ClearFix」と呼ばれるものがあると聞きました。どの要素に「ClearFix」を適用する必要がありますか?
解決
CSSを使用すると、After Psudeoを簡単に使用できます
.class1:after, .class2:after //append as many as you like
{
clear:both;
*zoom:1;
height:0;
visibility: hidden;
display:block;
}
alternative(providing children are not using the position selector)
(parent-elemts){overflow:hidden;}//bit of a quick fix!
HTMLファイルから不要なマークアップを除外してください
編集:ごめんなさい!何らかの理由で、コメントボタンを追加するボタンまたはupvoteボタンは今夜私のために機能しません。
あなたの他の質問に答えるために私の答えを追加するには:
あなたが言うTwitterブートストラップは、以下に提供したCSSに似た.clearfixクラスを使用しますが、その方法を要素に追加する必要があります。この余分なコードをドキュメントに追加するには。ただし、すべてのブラウザがCSS Pseduoをサポートしているわけではありません。
他のヒント
あなたはおそらくしなければならないだけです:
<div class="container">
<div class="row">
<div class="span6">column 1</div>
<div class="span6">column 2</div>
</div>
</div>
clearfix
必要はないはずです。
所属していません StackOverflow