div フローlayout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

div フローlayout_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:48:41

オリジナル

1769 人が閲覧しました

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