Wie man ein Bild nach oben in html/css bewegt

Ich bin ziemlich neu in HTML und ich wollte ein Bild auf meiner Seite haben, aber wenn ich <hr> verwende, um es von anderen Sachen zu trennen, kreuzen sie sich. Also möchte ich mein Bild ein wenig nach oben bewegen. Hier ist der Code Ich habe mit:Wie man ein Bild nach oben in html/css bewegt

<html dir="rtl"> <body> ... <img src="20161125_041749.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;" ... </div> </body> </html>

Ich bin nicht <head> noch <style> Tags.
Ich habe versucht, position: relative; top: -10px; , aber ich kann nicht herausfinden, wie man es benutzt oder es hat ein Problem mit dem "float". Coud jemand bitte helfen Sie mir, was zu tun ist?
Vielen Dank im Voraus und Dank an alle, die es versucht haben, so weit ...

Quelle

2016-11-25 Babresepid

Es kann schwierig sein, Ihnen eine Antwort mit nur einer einzigen Zeile Ihres Codes zu geben. Vielleicht erstellen Sie ein besseres Beispiel für Ihr Problem mit https://jsfiddle.net/? – DataSwede

atleast geben Sie den vollen Code von Ihnen – jafarbtech

Ändern Sie den Wert von oben bieten, wie Sie

#img{ 
 
    position: relative; 
 
    top:-10px; 
 
    }

<img src="https://i.stack.imgur.com/W1bSf.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;" id="img">

benötigt

Quelle

2016-11-25 03:55:43

<img src="20161125_041749.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;margin-bottom:5px">

margin-bottom zu lösen: 5px; wird gut arbeiten, oder Sie können die Werte ändern nach Ihrem Bedarf

oder Demo-Code für bessere Sicht

Quelle

2016-11-25 03:53:18

Dieses Grundproblem (dass das Bild und <hr> sich kreuzen) klingt wie ein Clearfix Problem.

Wenn Sie ein Floating-Element haben, kann es scheinen, zu „überlappen“ nicht-schwimmenden Elemente:

#float { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    float: right; 
 
} 
 

 
hr { 
 
    border: 4px solid blue; 
 
}

<div id="float"></div> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id auctor tellus. In hac habitasse platea dictumst</p> 
 
<hr>

Aber anstatt zu versuchen, nur den Schwimmer nach oben, möchten Sie vielleicht hinzufügen clear: both zu Ihrem <hr>:

#float { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    float: right; 
 
} 
 

 
hr { 
 
    border: 4px solid blue; 
 
    clear: both; 
 
}

<div id="float"></div> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id auctor tellus. In hac habitasse platea dictumst</p> 
 
<hr>

Quelle

2016-11-25 04:03:41

Wie man ein Bild nach oben in html/css bewegt

Antwort

Verwandte Themen