CSS - DIV Ausrichtungsprobleme

Question

Ich habe ein kleines kleines Problem mit dem CSS unten.

Während die Kästchen in einer Reihe stehen, versuche ich, den Text in den Kästchen erscheinen zu lassen und dann den Text zu stilisieren ... alles, was ich versucht habe, scheint fehlzuschlagen. Etwas überschreibt es oder der Browser ignoriert es einfach.

Weiter ist immer noch, dass der Text "Foundation 100 - Präsenz" immer seinen vorgesehenen Bereich übertrifft. Dieser Text ist dynamisch und wird sich ständig ändern. Daher ändert sich die Größe dieses Blocks basierend auf der Anzahl der Zeichen im Block. Also dieser Wert im CSS -> width: 489px; wird sich entsprechend ändern.

Darüber hinaus enthält jeder dieser Blöcke eine HTML-Formularverknüpfung. ...

Ein paar Einschränkungen kein Javascript, kein Java und kein PHP. direktes HTML und CSS.

Wer möchte einen Riss in diesem einen machen ????

Der Kodex auf der Seite:

#video_line { 
 
    width: 489px; 
 
    text-align: center; 
 
} 
 
#vl_desc { 
 
    float: left; 
 
    width: 200px; 
 
    height: 30px; 
 
    background: #ffffff; 
 
} 
 
#vl_rental { 
 
    float: left; 
 
    width: 62px; 
 
    height: 20px; 
 
    background: #ff0000; 
 
} 
 
#vl_sales { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    width: 62px; 
 
    height: 20px; 
 
    background: #00ff00; 
 
} 
 
#vl_view { 
 
    float: right; 
 
    width: 62px; 
 
    height: 20px; 
 
    background: #0000ff; 
 
} 
 
#vl_text_desc { 
 
    text-align: right; 
 
    font-size: 19 px; 
 
    font-weight: 300; 
 
}

<div id="video_line"> 
 
    <div id="vl_desc"> 
 
    <p id="vl_text_desc">Foundation 100 - Presence</p> 
 
    </div> 
 
    <div id="vl_rental">TEXT</div> 
 
    <div id="vl_sales">TEXT</div> 
 
    <div id="vl_view">TEXT</div> 
 
</div>

Dies ist, was ich suche ->

Answer 1

Hier ist ein Anfang

#video_line { 
 
    width:489px; 
 
    text-align:center; 
 
} 
 

 
#vl_desc { 
 
    float:left; 
 
    width:250px; 
 
    height: 30px; 
 
    background: #ffffff; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_rental { 
 
    float:left; 
 
    width:62px; 
 
    height: 20px; 
 
    background: #ff0000; 
 
    color: white; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_sales { 
 
    float:left; 
 
    width:62px; 
 
    height: 20px; 
 
    background: #00ff00; 
 
    color: darkgreen; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_view { 
 
    float:left; 
 
    width:62px; 
 
    height: 20px; 
 
    background: #0000ff; 
 
    color: yellow; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_text_desc { 
 
    text-align: right; 
 
    font-size: 19 px; 
 
    font-weight: 300; 
 
}

<div id="video_line"> 
 
    <div id="vl_desc"><span id="vl_text_desc">Foundation 100 - Presence</span></div> 
 
    <form id="vl_rental">TEXT</form> 
 
    <form id="vl_sales">TEXT</form> 
 
    <form id="vl_view">TEXT</form> 
 
</div>

Answer 2

einfach ändern folgende Arten:

#vl_text_desc { 
    margin-top: 0; 
} 
#video_line { 
    width: 489px; 
    text-align: center; 
    display: inline; 
} 
#vl_view { 
    float: left; 
} 
#vl_desc { 
    float: left; 
    width: 200px; 
    height: 30px; 
    background: #ffffff; 
    margin-right: 16px; 
    margin-top: 0; 
} 

Von hier Sie font-family ändern können und color wie Sie bevorzugen.