ホームページ > 記事 > ウェブフロントエンド > CSS の問題です。見てみるのを手伝ってください。ありがとうございます。 _html/css_WEB-ITnose
CSS の問題です。見てみるのを手伝ってください。ありがとうございます。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:20:21949ブラウズ
質問 1:
<style> .a{ background-color: #1c94c4; } .b dd{ float: left; <!--当我使用float:left后，div.a的颜色蓝色【 background-color: #1c94c4;】就不显示了，有没有办法让他填充b的区域，我想到的是对a使用absolute，但是这样写导致c的内容无法显示，要使用padding-top:100px这样才能显示，我觉得很不合理。请问有什么好的解决方法吗？ --> } .c{ clear: both; }</style><div class="a"> <dl class="b"> <dd>a</dd> <dd>b</dd> <dd>c</dd> <dd>d</dd> </dl></div><div class="c"> 123</div>
ディスカッションへの返信 (解決策)
dd のラベルを dt に変更するだけです
dd のラベルを変更するだけmake it dt
こんにちは、私が言いたいのは、position:absolute を使用した後、下の div がそれによって覆われないようにして、相対レイアウトで表示し続けるにはどうすればよいですか?
あなたの言ったことはよくわかりません、そしてそれはこれの対象ではないようです
あなたの言ったことはよくわかりません、そしてそれはこれの対象ではないようです。
こんにちは。それでおしまい。 aのposition:absoluteを追加して、cを表示させたいのですが、padding-top:100以外に方法はありますか
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><style> .a{ position: absolute; background-color: #1c94c4; } .b dt{ float: left; } .c{ }</style><div class="a"> <dl class="b"> <dt>a</dt> <dt>b</dt> <dt>c</dt> <dt>d</dt> </dl></div><div class="c"> 123</div></body></html> cの位置を定義するだけで表示されますが、表示される位置が下ではなく、
クラス a の div はサポートされていないため、これは解決できます
.a {
background-color: #1c94c4; flow: hidden;/*子要素 float の場合、親要素は幅と高さを設定しません*/
}
<style> .a{ background-color: #1c94c4; } .b dd{ display: inline-block; }</style><div class="a"> <dl class="b"> <dd>a</dd> <dd>b</dd> <dd>c</dd> <dd>d</dd> </dl></div><div class="c"> 123</div> あなたの div はそうしているので幅と高さを設定しないでください。要素がフローティングになった後、その高さは 0 になります。表示されない場合の解決策は3つあります。
1: divの高さを設定します。
2: div の下に子要素を追加し、clear:both を使用します
3: div の overflow:hidden を設定します
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。