BinaryDevelop
  1. ホーム
  2. Web制作
  3. ヒントとコツ

div 涓巇甈甈ﺒ洋洋甈輸送設備

2022-02-03 17:34:19

HTMLのdivを使用していて、ブロックの真ん中にぴったりと収まらず、修正できない場合

1を追加すると

* {
margin:0;
padding:0;
}

すべてのブロックの間隔を0にし、以下のパディングマージンと競合しないようにします。

2. 上下のdivの間隔

上下に間隔をあけて4つのdivを書きましたが、そのコードと効果は以下の通りです。 

.div1{
height:100px;
background-color:blue;
position:relative;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.div3{
height:100px;
background-color:red;
position:relative;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
}
<body>
<div class="div1" ></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>

そこで、それぞれのdivにmargin:0を追加してdiv間のスペースをなくそうとしたところ、以下のようなコードになりました。

.div1{
height:100px;
background-color:blue。
position:relativeを指定します。
margin: 0;
}
.div2 {
height:100px;
background-color:blueviolet。
position:relative。
margin: 0;
}
.div3{
height:100px;
background-color:red。
position:relativeを指定します。
margin: 0;
}
.div4{
height:100px;
background-color:yellow。
position:relativeを指定します。
margin: 0;
}

結果は同じですが、以下のようにまだギャップがあります。

次にBaiduで調べたところ、font-sizeを設定する方法があり、以下のようなコードと効果がありました。

body{font-size:0;}となります。
.div1{
height:100px;
background-color:blue。
position:relativeを指定します。
}
.div2 {
height:100px;
background-color:blueviolet。
position:relative。
}
.div3{
height:100px;
background-color:red。
position:relativeを指定します。
}
.div4{
height:100px;
background-color:yellow。
position:relativeを指定します。
}

上記のコードでは、body{font-size:0;}を追加することに着目し、以下のような効果を得ています。

divの上と下の隙間がなくなっているのがわかると思います。しかし、上部と左端の間にはまだ隙間があります。

これについては、以下のコードでbody{margin:0px;}を追加することで行いました。

body{margin:0px;}.
body{font-size:0;}。
.div1{
height:100px;
background-color:blue。
position:relativeを指定します。
}
.div2 {
height:100px;
background-color:blueviolet。
position:relative。
}
.div3{
height:100px;
background-color:red。
position:relativeを指定します。
}
.div4{
height:100px;
background-color:yellow。
position:relativeを指定します。
}

その効果は次の通りです。

ご覧の通り、スペーシングが解消されました。

ただし、font-size:0; にすると、すべてのフォントが消えてしまうので、問題があります。

ここで私が解決した方法は、divを追加して、内側のdivのフォントサイズをリセットすることです。例えば、: font-size:30px; とします。

完璧な解決策!

3、DIV + CSS clear:bothでfloat生成後にdivの上に隙間ができる問題をクリア。

我々は、時にはCSSのフロートの使用は、CSSのフロートを生成することを知って、この時間は、クリアフロートをクリーンアップする必要があり、我々は達成するために明確なスタイルプロパティを使用することができます。

しかし、clear:bothを使って出来上がったfloatを消した後、clear:bothを適用したdivの上に白い空間ができることがよくあります。

解決策は、このdivの上のdivにoverflow:hiddenを追加することです。

                <div class="a hid">
                    <div class="bms_2_1fl">~あなたに会うために海を渡る~</div>
                    <div class="bms_2_1_2 fl"><img src"__STATIC__/images/male.png" width="18" height="18" /></div>
                </div>
                <div class="b cle hid">Beijing</div>

スタイルノート

.cle{clear:both;}。
.hid{overflow:hidden;}。
.fl{ float:left;}。
.fr{ float:right;}。

最近のclear:bothで生じるdivの隙間はこれで解決です。

divでclear:bothを使う最大の理由は、cssでtext-align:left;を設定してもdiv bのテキストが左中央にならないためで、この場合はclear:bothを使用することになります。

いくつか質問があります。
(1) div 内のテキストに対して text-align:left; が無効なのはなぜですか？
(2) text-align:left;が効かないのに、clear:bothを使うと効くのはなぜですか？
(3) clear:bothを使用すると、なぜ隙間ができるのですか？
(4) 上の兄弟divでoverflow:hidden;を使用すると、下に隙間ができる問題が解決するのはなぜですか？

これらの質問については、機会があればもっと具体的に調べてみます。

まとめますと。

divがclear:bothを適用して隙間を作った場合、その上の兄弟divにoverflow:hidden;を追加して隙間をなくす必要があります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します