ホームページ >ウェブフロントエンド >CSSチュートリアル >div+css による Web ページ レイアウト デザインの新たな始まり (8)
div+css による Web ページ レイアウト デザインの新たな始まり (8)
- 黄舟オリジナル
- 2016-12-29 14:42:491268ブラウズ
続いて、浮遊要素のグループが右側に十分なスペースがないことに遭遇すると、自動的に下降し、最外層から離れることはありません。つまり、地上の流れパターンに従いませんが、それはなります。 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>
これは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 はまだ丁寧に行う必要がありますが、上部は自動的に調整されません。左はまだそこまで賢くないので手動で調整する必要がありますが自動で走れるならバンカーになりますね。 。
例を見てみましょう
これは一般的な Web ページの構造です。ここでは、左側にリスト、右側にコンテンツが表示されています。 tail
コードは次のとおりです
<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 がその領域を占有していることはわかりません
最下層に float:left;
クリアとは、フロートをクリアするという意味ですが、最初は戸惑いましたが、おそらくほとんどの人が理解できないと思います
このように理解する必要があります
普通のdivにclearを追加することは、空を見ることができる目をインストールするのと同じであり、地上divは空divの状況を見ることができ、空divがどの領域を占めているかを知ることができるので、 air div の領域を占有しないようにするため、
clear には left right、both、none 属性があり、これは
left を設定しないことと同じです。右は右上のスペースです。通常は両方が使用されます。内容については、PHP 中国語 Web サイト (www.php.cn) に注意してください。