Wie füge ich ein Bild direkt unter einem Textkopf hinzu?

Here is my fiddle.Wie füge ich ein Bild direkt unter einem Textkopf hinzu?

Ich versuche, den Bleistift direkt unter „blah“ hinzufügen, aber es scheint, dass margin-top funktioniert nicht ....

Zusätzlich zu, dass, Ich habe Probleme zu verstehen, wie zu mache den Bleistift direkt unter "Blah" trotz unterschiedlicher Bildschirmgrößen. Mir wurde gesagt, dass die Verwendung von Prozentsätzen dieses Problem löst, ist das richtig?

HTML:

<head> 
    <h1>Blah Pencil</h1> 
    <img src = "http://www.pngall.com/wp-content/uploads/2016/03/Pencil-PNG-Pic.png" id = "pencil" height = "5%" width = "20%"> 
    </head> 
    <link rel="stylesheet" type="text/css" href="pencil.css"> 
    <link href="https://fonts.googleapis.com/css?family=Fugaz+One|Roboto" rel="stylesheet"> 

    <body> 

    </body> 

</html>

CSS:

h1{ 
    text-align: center; 
    font-family: 'Fugaz One', cursive; 
    font-size: 590%; 
} 

body{ 
    background-image: url(https://www.xmple.com/wallpaper/graph-paper-grid-white-blue-1920x1080-c2-fdf5e6-1e90ff-l2-2-54-a-0-f-20.svg); 
} 

#pencil{ 
    display: inline-block; 
    margin-top: 21px; 
}

Quelle

2016-06-20 somanyerrorswhy

Also, das Hauptproblem ist, dass die Header-Elemente wie ein 'h1' hat in Rand bauen, dass es nach unten, aber so oder so treibt, ist dies nicht der ideale Ansatz, wenn Sie es wollen unten immer seine das Wort "Blah". Sie sollten die absolute Positionierung basierend auf einem eingebetteten Bereich verwenden. Ich werde gleich einen JSFiddle werfen. – Aeolingamenfel

Vielleicht möchten Sie lernen, wie Sie eine HTML-Seite strukturieren, wie die Dinge innerhalb der Kopf-und Körper-Tags gehören. – Becuzz

Ist das die Art von was Sie gesucht haben: https://jsfiddle.net/omy2w0k2/1/? – Aeolingamenfel

Sie können eine span in h1 verwenden und img hinein setzen und Position verwenden relative/absolute auf span und img

h1 { 
 
    text-align: center; 
 
    font-family: 'Fugaz One', cursive; 
 
    font-size: 590%; 
 
} 
 

 
body { 
 
    background-image: url(https://www.xmple.com/wallpaper/graph-paper-grid-white-blue-1920x1080-c2-fdf5e6-1e90ff-l2-2-54-a-0-f-20.svg); 
 
} 
 
span { 
 
    position: relative; 
 
} 
 

 
h1 img { 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<h1><span>Blah<img src="http://www.stabilo-promotion.com/download/C27ad4c3cX13ba9b553a7X2665/STABILO_Giant_5430K_ALL_STABILO_red_SPP_150dpi.png" id="pencil"></span> Pencil</h1> 
 

 
<link rel="stylesheet" type="text/css" href="pencil.css"> 
 
<link href="https://fonts.googleapis.com/css?family=Fugaz+One|Roboto" rel="stylesheet">

Quelle

2016-06-20 17:19:09

Wie füge ich ein Bild direkt unter einem Textkopf hinzu?

Antwort

Verwandte Themen