10

次のようなhtmlページがあります。

ここに画像の説明を入力

左ペインにテキストを表示したいのですが、問題は、テキストが楕円形の領域内にのみあることです。どうすればこれを達成できますか? 楕円形の画像は背景画像ですが、必要に応じて<img>タグを使用することもできます。パディング付きのタグを使用するのは不十分な方法の 1 つです<p>が、それは効率的な方法ではないため、いくつかの良い方法を親切に提案してください。

編集： HTML:

<div id="leftStage" class="rounded-corners">
  <div id="questionDisp" align="center">

  </div>
</div>

CSS:

#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}

JS:(適切な関数が呼び出された場合: )

$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1);  //data read from xml

編集:必要なのは、divまたは楕円形の背景の上にあるもので、テキストはそれに収まる必要があります。xmlファイルからテキストを取得しているため、表示するテキストサイズが固定されているわけではありません

4

5 に答える 5

2

実際には、 csstextwrap に純粋な CSS/XHTML コード ジェネレーターがあり、まさにあなたが望むことを実行します。

編集：

ここでの概念は<div>、テキストの両側に 's を配置して、'''' ''' ''' ''' ''' ''' ''' ''' ''' ''' ''' ''' ''' ''' '' ''' '' '' ''' '' '' ''' '''''' ''''''] の間で強制的に "流れる" ようにすることです。フローティング<div>の幅を設定することで、さまざまなカスケード「ステンシル」を作成できます。

ここに示されている概念を参照してください:フィドル

于 2012-06-12T05:26:37.250 に答える
1

jQueryプラグインを試してみるのもいいかもしれませんText Fill

参照: https://stackoverflow.com/a/688362/753676

于 2012-06-12T13:11:00.270 に答える
1

左のフロートのみが機能したため、回答を削除しました。

このコードを貼り付けると、それがどのように機能するかが正確に示されます。円の png を作成する代わりに、border-radius を作成しました。

<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
于 2012-06-14T19:36:00.987 に答える
1

background-image の場合は、position:absolute を適切な余白 (上と左) で使用し、幅を楕円形の background-image より小さく設定します。次に、プロパティ「block」を表示します。

于 2012-06-06T07:39:27.823 に答える
0

あなたは HTML を共有していません。動作するコードはいくつかの前提があります

HTMLは、

<div id="main">
<div class="text">This is text</div>
</div>​

class を持つ divtextはテキスト コンテナーです。

同じのCSSは、

#main{
    background-image:url('http://i.stack.imgur.com/bw2HK.png');
    height:563px;
    width:691px;
}
#main .text{
    color:#FF0000;
    width:240px;
    text-align:center;
    top:100px;
    border:1px solid;
    float:left;
    position:absolute;
}

.textテキストのスタイリングを表すクラスは次のとおりです。主要部分はposition:absolute;. これにより、テキストの div 位置が絶対に設定されます。これで、上と左のスタイルを使用して、画像 div の上に div を移動できます。

ここで作業例を確認してください

PS境界線、色、その他のスタイルは、必要に応じて変更できます。

于 2012-06-06T07:34:45.873 に答える