1

コードは次のとおりです。

フィドル

<div id="main" style="border:1px solid red;">
<div id="child" style="background-color:#68c5e7; width:170px; margin:0 auto; font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); background-repeat   : no-repeat;">
<span style="padding-left:116px;">9:58</span>
</div>
</div>

時間は JavaScript を使用してカウントされるため、ページが読み込まれた後に文字列の長さが変更される可能性があります。背景の長さを修正する方法 #68c5e7 適切な長さ (img+text の長さに対応) になるようにします。

繰り返しますが、9:58 を 10:03 に変更しますが、背景色の長さは変更されていないため、収まりません。もう 1 つの要件: 画像とテキスト (テキストが長すぎず、常にメイン div の長さを超えない) は、メイン div のちょうど真ん中に配置する必要があります。

4

2 に答える 2

1

すべてのスタイルを<span>タグに追加し、割り当てられた値を削除するだけですwidth:

HTMLマークアップ:

<div id="main">
    <div id="child">
        <span> 123456</span>
    </div>
</div>​

CSSマークアップ:

#main{
    border:1px solid red;
}

#child {
    text-align: center;
}

span{
    /*width:190px; */
    padding-left:114px;
    background-color:#24a5a5;
    margin:0 auto; 
    font-size:30px; 
    background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); 
    background-repeat: no-repeat;
    white-space:nowrap;
    position: relative;
}

このデモをチェック

于 2012-08-06T13:51:35.123 に答える
0

いくつかの変更を加えます。

  1. コンテナ div から幅を削除します
  2. 親 div に text-align:center を追加します
  3. コンテナ div に inline-block の表示を持たせる

jsFiddle の例

HTML

<div id="main" style="border:1px solid red;text-align:center">
<div id="child" style="background-color:#24a5a5;  font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); background-repeat   : no-repeat;display:inline-block;">
    <span style="padding-left:114px;"> 12345678</span>
</div>
</div>​
于 2012-08-06T13:51:43.670 に答える