div+css による Web ページレイアウトデザインの新たな始まり (8)-CSSチュートリアル-php.cn

div+css による Web ページレイアウトデザインの新たな始まり (8)

黄舟

リリース： 2016-12-29 14:42:49

オリジナル

1257 人が閲覧しました

続いて、浮遊要素のグループが右側に十分なスペースがないことに遭遇すると、自動的に下降し、最外層から離れることはありません。つまり、地上の流れパターンに従いませんが、それはなります。 ps: それらはすべて同じ高さで浮かびます。。

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
float:left;
} 
#b{
width:100px;
height:100px;
border:soild;
background:green;
float:left;
margin:5px;
} 
</style> 
<head>
<body>
<div id="a">
<div id="b"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
</body>
</html>

ログイン後にコピー

div+css による Web ページレイアウトデザインの新たな始まり (8)

これはFirefoxとIE6でも同じことを示しています

最初のFloating divの高さが他のFloating divよりも高い場合はどうなりますか?

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
float:left;
} 
#b{
width:100px;
height:110px;
border:soild;
background:green;
float:left;
margin:5px;
} 
</style> 
<head>
<body>
<div id="a">
<div id="b"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
</body>
</html>

ログイン後にコピー

div+css による Web ページレイアウトデザインの新たな始まり (8)

最後の部分がそこに詰まっていることがわかります。強く押し込むとクラッシュしますよね？div はまだ丁寧に行う必要がありますが、上部は自動的に調整されません。左はまだそこまで賢くないので手動で調整する必要がありますが自動で走れるならバンカーになりますね。。

例を見てみましょう

div+css による Web ページレイアウトデザインの新たな始まり (8) これは一般的な Web ページの構造です。ここでは、左側にリスト、右側にコンテンツが表示されています。 tail

この効果を得たいです

コードは次のとおりです div+css による Web ページレイアウトデザインの新たな始まり (8)

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
} #b{
width:130px;
height:350px;
border:soild;
background:green;
float:left;
margin:5px;
} 
#c{
width:350px;
height:350px;
border:soild;
background:green;
float:left;
margin:5px;
} 
</style> 
<head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

ログイン後にコピー

しかし、多くの人はfloat:left;を追加するのを忘れるでしょう

以上です

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
} #b{
width:130px;
height:350px;
border:soild;
background:green;
float:left;
margin:5px;
} 
#c{
width:350px;
height:350px;
border:soild;
background:green;
float:left;
margin:5px;
} 
#d{
width:490px;
height:100px;
border:soild;
background:red;
float:left;
margin:5px;
} 
</style> 
<head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</body>
</html>

ログイン後にコピー

結果は次のようになります

覚えておいてください前にも言いましたが、地上の div は空の div が存在することを知りません。そのため、浮動 div がその領域を占有していることはわかりません div+css による Web ページレイアウトデザインの新たな始まり (8) 最下層に float:left;

を追加することに加えて、これは別の方法で、明確です

クリアとは、フロートをクリアするという意味ですが、最初は戸惑いましたが、おそらくほとんどの人が理解できないと思います

ここでのクリアは、フローティング div を削除したり、その位置を変更したりするものではありません

このように理解する必要があります
普通のdivにclearを追加することは、空を見ることができる目をインストールするのと同じであり、地上divは空divの状況を見ることができ、空divがどの領域を占めているかを知ることができるので、 air div の領域を占有しないようにするため、

clear には left right、both、none 属性があり、これは
left を設定しないことと同じです。右は右上のスペースです。通常は両方が使用されます。内容については、PHP 中国語 Web サイト (www.php.cn) に注意してください。

div+css による Web ページ レイアウト デザインの新たな始まり (8)

div+css による Web ページレイアウトデザインの新たな始まり (8)