HTML-Header Mit Bild Und Text - Align Text-Bottom?

Ich Schreibe eine HTML-Seite mit CSS. An der Spitze meiner Seite möchte ich zeigen, die einen header mit einem Bild und text (Bild Links neben den text). Die Bild Größe ist 64 x 64 Pixel und ich möchte, dass der text zu groß sein.

Konnte ich fast alles machen, außer ich will richten Sie den text am unteren Rand, aber, egal was ich mache, ich kann nicht scheinen, um den text zu stoppen, platzieren sich an der Spitze.

Hier ist der HTML-Code für meinen header:

<div id="container" class="container">
    <div class="header">
        <div class="header image"></div>
        <div class="header text">Header Text</div>
    </div>
</div>

und hier ist die CSS;

.container .header {
    height: 65px;
    border:2px solid red;
}

.container .header .image {
    background: url("../images/icon64.png") no-repeat;
    float: left;
    display: inline-block;
    width: 65px;
    border:2px solid green;
}

.container .header .text {
    float: left;
    display: inline-block;
    vertical-align: bottom;
    font-family: sans-serif;
    font-size: x-large;
    border:2px solid blue;
}

Habe ich gelesen, mehrere web-Seiten, die nach der Suche nach, wie dies zu tun. Ich fand eine Seite, schien ziemlich straight-forward. Sie sagten, Sie haben zu verwenden inline-block für die display Eigenschaft, um für vertical-align geehrt werden.

Änderte ich mein CSS zu dem, was Sie oben sehen, aber das immer noch nicht. Hier ist, was mein header sieht wie folgt aus:

HTML-Header Mit Bild Und Text - Align Text-Bottom?

(Hinweis: die Grenze Färbung ist nur für die Visualisierung, was Los ist.)

Kann mir jemand sagen was ich falsch mache und wie man es beheben, so dass mein text wird vertikal nach unten ausgerichtet?

Danke.

InformationsquelleAutor Jan Tacci | 2014-07-21

7

Das ist richtig, Satz-Elemente wie inline-Blöcke und verwenden vertical-align. Das bedeutet jedoch, dass nicht schweben der Elemente! Gefloateten Elemente schwebt und Sie negieren die display: inline-block Erklärung: http://jsfiddle.net/qQtG9/2/ (ich gereinigt habe deinen code etwas).

HTML:
```
<div class="header">
    <div class="image"></div><div class="text">Header Text</div>
</div>
```
CSS:
```
.header {
    border:2px solid red;
}

.header .image {
    background: url("http://placehold.it/64x64") 
                no-repeat;
    width: 65px;
    height: 65px;
    border:2px solid green;
}

.header .text {
    font: x-large sans-serif;
    border:2px solid blue;
}

.header .image, 
.header .text {
    display: inline-block;
    vertical-align: bottom;
}
```
Der Grund, warum ich schwebte der Elemente ist, weil ich wollte, dass Sie Seite-an-Seite-und ich dachte, dies war der einzige Weg. :O
Nur setzen Sie Sie nebeneinander in der markup-Code: jsfiddle.net/qQtG9/2. Wenn Sie die Anzeige auf dem neue-Zeile-verwenden Sie Wagenrücklaufzeichen und browser behandelt es als ein Raum.
Was meinst du? In der html -, setzen Sie Sie nebeneinander, was bedeutet nicht nest?
Okay, vielen Dank! 🙂 Habe ich nie verwendet, fiddle vor, das ist cool!
Besser noch, schauen Sie sich die aktualisierten code für meine Antwort. Die divs im Kopf stapeln sich neben einander in den HTML-Code.

InformationsquelleAutor DRD
0

Können Sie auch versuchen, was dem #header ein position:relative
und dann geben die .text position absolute, also, wenn Sie geben-bottom:0; es werden Stapel an der Unterseite des #header div

InformationsquelleAutor user3855157

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.