Wie zu set Breite von DIV-span mit text drin (also nicht fixiert)

Möchte ich wissen, wie können Sie die Breite eines DIV -, span -, um die Größe der text in das div-element. Beachten Sie, dass der text muss in ein div-Element, kann ich nicht es in ein span-Tag, und mit Display:inline-block verwirrt mit meinem javascript-Funktion. Das andere problem ist, dass das DIV-element hat einen hintergrund (siehe Klassen Fliegen-text) und hintergrund spannt mit dem übergeordneten element die Breite und nicht die Breite des Textes innerhalb des div. Wie macht man das?

Mein code:

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>​

Danke

bitte geben Sie einen gewünschten screenshot

InformationsquelleAutor Dexter Schneider | 2012-06-13

  1. 2

    du versuchst Ihr zu füllen die Breite des Containers, aber Sie wollen, dass Sie das einwickeln der enthaltene text. dies sind zwei entgegengesetzte Verhaltensweisen.

    halten der div, wie Sie sind, und wickeln Sie den text in einem (semantisch korrekt) <p> tag. dann ist dein 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;
}
    Danke. Muss ich klar die Schwimmer nach den p-tags?
    ja, Sie werden auch klären müssen, damit die divs sitzen, eine unter der anderen! sorry, ich vergaß, um anzugeben, es

    InformationsquelleAutor Luca

  2. 3

    Ein paar Vorschläge:

    1. Schwimmer der divs. wenn Sie z.B. gab die .flying-text Elemente einer float:left Erklärung dann würden Sie 'shrink wrap' auf deren Inhalte. (Sie wäre auch eine clear:left Erklärung klar schwimmt).

    2. Wickeln Sie den text in eine inline oder inline-block - element (wie a span), und stellen Sie Ihre Hintergrundfarbe auf der span. z.B. <div class="flying-text active-text"><span>Text1</span></div>

    danke, sehr hilfreich

    InformationsquelleAutor Jonathan Nicol

Schreibe einen Kommentar