10

我有一个 html 页面，如下所示：

在此处输入图像描述

我想在左窗格上显示一些文本，但问题是文本应该只在椭圆形区域内。我如何实现这一目标？请注意，椭圆形图像是背景图像，但是如果需要，<img>如果有帮助，我也可以为它使用标签。一种蹩脚的方法是使用<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>在文本的任一侧浮动 '，以便您的内容被迫在它们之间“流动”。通过设置浮动的宽度<div>，您可以创建各种级联“模板”。

请参阅此处说明的概念：小提琴

于 2012-06-12T05:26:37.250 回答
1

也许你可以试试 jQuery 插件Text Fill

另见：https ://stackoverflow.com/a/688362/753676

于 2012-06-12T13:11:00.270 回答
1

如果它是背景图像，则使用具有适当边距（顶部和左侧）的位置：绝对，并将宽度设置为小于椭圆背景图像的宽度。然后显示属性“块”。

于 2012-06-06T07:39:27.823 回答
1

我删除了我的答案，因为只有左浮动有效。

如果你粘贴这段代码：它会告诉你它是如何工作的。我做了一个边界半径而不是创建一个圆形 png。

<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 回答
0

您还没有共享任何 HTML，工作代码是有一些假设的

HTML是，

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

其中 div with classtext是文本容器。

同样的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 回答