右フローティング div_html/css_WEB-ITnose の行折り返し現象の原因

WBOY
リリース: 2016-06-24 11:28:15
オリジナル
1196 人が閲覧しました

右の浮動 div がラップする理由:
もちろん、右の浮動 div がラップする理由はたくさんあります。初心者が犯しがちな間違いを次に示します。
コード例:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div{  width:200px;  height:100px;  background:blue;}#right{  float:right;}</style></head><body><div id="left"></div><div id="right"></div></body></html>
ログイン後にコピー

上記のコードでは、2 番目の浮動 div に改行があります。
多くの友人は、右側の div はフローティングであり、改行なしで最初の div の右側に配置できると考えていますが、実際には、最初の div は別の行を占有しているため、2 番目の div はフローティングであるにもかかわらず、これは間違いです。浮いてしまうと改行も発生します。最初の div が left float に設定されている限り、2 つの div は 1 行に表示されます。

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=15669

詳細については、以下を参照してください: http://www.softwhy.com/divcss/

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート