Question

我想知道如何设置DIV的宽度以跨越div元素中文本的大小。请注意，文本必须位于div中，我不能将其放在一个范围内，并使用Display：inline-block混淆我的javascript函数。另一个问题是DIV元素有一个背景（参见类飞行文本），背景跨越父元素宽度而不是div内的文本宽度。怎么做？

我的代码：

CSS：

<style>
.container{
width:910px;
height: 380px;
background: url(http://v4m.mobi/php/images/home_back.jpg) center no-repeat;

    margin:0 auto;
    color:#FFF;

    background-color: #000;
}
.flying-text{
    margin-left:-100px;
    color: #fff;
    font-size: 20px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 0px 10px 10px 10px;
    border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    text-align: left;
    vertical-align: middle;
    padding: 5px 0px;
}
</style>

HTML：

<div class="container">
  <div class="flying-text active-text">Text1</div>                        
  <div class="flying-text">Text2</div>                        
  <div class="flying-text">Text3</div>                      
</div>

谢谢

Answer 1

一些建议：

浮动div。例如如果你给.flying-text元素一个float:left声明，那么它们会'收缩'到它们的内容。（您还需要clear:left声明才能清除浮点数。
将文字换入inline或inline-block元素（例如span），然后在span上设置背景颜色。例如<div class="flying-text active-text"><span>Text1</span></div>

Answer 2

您正试图让您填充容器的宽度，但是您希望它们包装所包含的文本。这是两种相反的行为。

保持div原样，并将文本包装在（语义上正确的）<p>标记中。然后你的CSS会变成：

.flying-text{
    margin-left:-100px;
    color: #fff;
    font-size: 20px;
    height: 50px;
    text-align: left;
    vertical-align: middle;
    padding: 5px 0px;
}

.flying-text p {
    float: left;
    background: rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 0px 10px 10px 10px;
    border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
}

如何设置DIV的宽度以及其中的文本（因此不固定）

2 个答案: