フロートを使用しているときの私のWebページ:ナビゲーションバーボタンの左側(水平に並べる)では、その後、次のようなコンテンツが右側に移動します。
[ Home About More ]
Text
私はそれをしたい:
[ Home About More ]
Text
助言がありますか?
clear
テキストで属性を使用する必要があります。そのようです:
.text {clear:left}
clearfixソリューションを使用して問題を修正します。
http://themergency.com/css-clearfix-demystified/
更新:CSSファイルに以下を追加します。
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
次に、HTMLでclearfix
、float要素の親コンテナにクラスを追加します。HTMLマークアップがどのように見えるかはわかりませんが、clearfixソリューションに沿ったものである可能性があります。
<div class="clearfix">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
これは非常に一般的な問題です。そのようにcssエントリを定義することをお勧めします
.clear {clear:both;}
次に、将来的には、上記のfloatをクリアする必要がある要素にこのクラスを追加するか、このクラスで空のdivを追加することができます。
<div class="clear"></div>
または、これは(オーバーフロートリック)に機能します:
<div style="overflow:auto">
<div style="float:left">[ Home </div>
<div style="float:left">About </div>
<div style="float:left">More ]</div>
</div>
Your other text