ホームページ > 記事 > ウェブフロントエンド > div フローlayout_html/css_WEB-ITnose
div フローlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:48:411719ブラウズ
CSS レイアウト
//style.css#first{ width:300px; height:200px; background:red; float:left}#second{ width:300px; height:200px; background:pink; clear:right}#third{ width:300px; height:200px; background:green; clear:left}#four{ width:300px; height:200px; background:blue; float:right} <html><head> <title>div的概念</title> <link rel = "stylesheet" href = "style.css" type = "css/style.css"/></head><body> <div id="first">第一个div</div> <div id="second">第二个div</div> <div id="third">第三个div</div> <div id="four">第四个div</div></body></html>
いくつか指導をお願いします。なぜ 2 番目の div が表示されず、float と clear が同じ行で使用できないのですか? ? ?
ディスカッションへの返信 (解決策)
明らかに、2 番目の div の左側には float があり、最初と 2 番目の div の高さと幅はまったく同じであるため、左側の float をクリアしただけです。 2 番目の div が押し込まれ、最初の div と一致します
左側の float をクリアしてみてください
2 つのブロック属性要素を同じ行に表示する場合、個人的には両方のブロックを float に設定することをお勧めしますが、それはできません背後の要素を左側にフローティングするだけで解決できます。背後の要素にコンテンツがある場合、IE の以前のバージョンでは互換性の問題が発生するためです
では、なぜ 3 番目の div と 4 番目の div が同じ行にないのでしょうか?ああ
#first{ width:300px; height:200px; background:red; float:left; z-index:1;} #second{ width:300px; height:150px; background:blue; clear:right; z-index:2;} #third{ width:300px; height:200px; background:green; clear:left} #four{ width:300px; height:200px; background:blue; float:right} あなたによると、最初の div と 2 番目の div を同時に表示する必要がありますが、まだ 2 番目の div を表示する方法はありません。マスター
実は、タグの入れ子の仕様や基本的な互換性の問題など、基本原則をマスターする必要があると言いたいだけです
互換性のあるコードを 1 つずつテストする必要はありませんが、私たちは知っています互換性の問題があるものはどれか、そして互換性のない記述方法を避ける
CSS を学習している多くの人が、なぜ p タグや li を使用するのかなどの疑問に悩まされているのを見るたびに、実際、それはすべて同じで、おそらくそうなのだと思います。質問
3 番目の div と 4 番目の div が同じ行にないのはなぜですか?
3 番目は明らかにブロック属性要素なので、ブロック属性要素の特徴は何ですか? とにかく、排他的な行に表示されます
変更されたコードには特別なことはないと思います。階層の概念はポジショニングと組み合わせる必要があります。純粋なポジショニング レベルは無意味です
http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html