0

背景に画像と div のテキストが含まれるスパンがあるとします。

<div id="myDiv">
    <span style="background: url('path_to_background_image');">My Span</span>
    <span>Some text...</span>
</div>

Some text...テキストを常に左スパン (背景として画像があるスパン) の中央右の位置に表示したい。テキストは動的なので、テキストがどれだけ大きくなったり小さくなったりしても、テキストは常に左スパンの右側 (右側の中央) にとどまるようにします。JQuery をまったく使わずにこのようなことを達成することは可能ですか (単純な HTML と CSS のみ)?

私にお知らせください。

ありがとうございました

4

2 に答える 2

0

div の使用については Verber に同意しますが、次のコードを使用して、あなたが探していると思われる効果を達成しました。

<style>
.with-background {
position:relative;
height:250px;
width:600px;
background:url(bg-image.jpg);
}

.caption {
position:relative;
left:350;
background:pink;
top:50;
width:200px;
height:100px;
}
</style>

..そしてマークアップの場合:

<div class="with-background">
    <div class="caption">
        <p>Some Text</p>
    </div>
</div>

このコードは、テキストの四角形を中央から少し右に設定し (left:350 を使用)、上部の境界線から 50 ピクセル (top:50 を使用) に設定します。背景画像の幅は 600 ピクセルなので、「キャプション」クラスの「左」プロパティを 350 に設定します。これは、背景画像の幅の半分強です。独自の背景画像のサイズに合わせて変更すれば、準備完了です。

「背景：ピンク;」プロパティは、divの配置を簡単に確認できるようにするためのものです:)

于 2012-11-25T05:59:22.520 に答える
0

特にテキストを常に特定の場所に配置したい場合は、divのみを使用する方がよいと思います。たとえば、2 つを一緒に中央に配置し、指定したサイズのみを使用する場合は、次のようにします。

  <style>
    #wrapper{margin-left: auto: margin-right: auto: width: 700px;}
    #title{float: left; width: 20%};
    #text{float: left; width: 80%};
  </style>


  <div id="wrapper">
    <div id="title">Title</div>
    <div id="text'>...Random amount of Text</div>
  </div>

マージンなどをいじって、すべてを完璧にすることができます。

于 2012-11-25T05:29:16.270 に答える