0

私はcssが初めてで、あなたの指導が必要です。画像の背景があり、その中に 2 つのテスト行を配置する必要があります。テキストと画像の上部境界線の間の上部の距離は 50 ピクセルにする必要があります。このテキストの下に別のテキストがあります。これら 2 つのテキスト間の距離は 10px です。また、2 番目のテキスト (下のテキスト) と画像の下端の間の距離は 40 px にする必要があります。以下のコードを思いつきました。最初のクラスの高さを 100px にハードコーディングする必要がありますか? そうすると、2 つのテキストが混雑しすぎます。以下のコードが正しいかどうか教えてください

HTML

<div class="header1">
    <div class="header2" >
        The first text goes here
    </div>
    <div class ="header3">
        The second small tesxt goes here
    </div>
</div>

CSS

.header1{
    display: block;
    background-image: url("1.jpg");
    background-repeat:no-repeat;  
}
.header2{
    font-family: Arial;
    font-size:42px;
    color:#FFFFFF;
    height:50px;
    margin-top:50px;
    margin-left: 170px;
    margin-bottom:10px;
}
.header3{
    font-family: Arial;
    font-size:16px;
    color:#FFFFFF;
    height:40px;
    margin-left: 170px;
    margin-top:10px;
    margin-bottom:40px;
}
4

3 に答える 3

0

あなたのコードは良いです、あなたはちょうどこの行を追加する必要があります:

.header1 {
    overflow: hidden;
}

注：.header3 { margin-top:10px; }必須ではありません。このマージンはすでに修正されています.header2

Jsフィドル

于 2013-09-18T12:06:11.200 に答える