CSS の問題です。見てみるのを手伝ってください。ありがとうございます。 _html/css

ディスカッションへの返信 (解決策)

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS の問題です。見てみるのを手伝ってください。ありがとうございます。 _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:20 AM

質問 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 までご連絡ください。