2016-06-12 6 views
0

Ich habe dieses HTML nach links:Brief an die rechte Seite ohne Druck Text hinzufügen Hier

<div class="last_img"> 
     <p>Galutinė žetono išvaizda:</p> 
     <span class="zetin11">A</span> 
     <span class="zetin12">A</span> 
     <span class="zetin13">A</span> 
     <span class="zetin14">A</span> 
     <span class="zetin15">A</span> 
     <img class="last_img_img" src="images/img1.png" alt=""> 
    </div> 

Wenn ich Text schreiben, wird der Text in Spanne bewegen nach links, so dass es außerhalb des Bildes geht. Wie kann ich nur Buchstaben auf der rechten Seite hinzufügen, ohne Text nach links zu verschieben?

Das ist mein css von zetin11:

position: relative; 
    top: -125px; 
    right: -79px; 
    font-family: Courier; 
    font-size: 18px; 
+0

http://jsfiddle.net/ Cia sukelk viska, tada iskart daugiau zmoniu pades :) – Frutis

+0

Haben Sie versucht, die Position zu fix oder absolut zu ändern? – Twahanz

+0

@Twahanz Mit absolutem Text verschiebt sich auch nach links – Raimondas

Antwort

0

von der Frage, was ich verstanden, dass Sie die A ist nach rechts ziehen möchten, ohne den Absatz zu bewegen. Wenn das der Fall ist, dann ist hier ein

Früher habe ich nur die

span{ 
    float: right; 
} 

Arbeits Fiddle: https://jsfiddle.net/rittamdebnath/fdhj1u6s/

0

Ich würde dies wie folgt tun:

HTML

<div class="last_img"> 
    <p>Galutinė žetono išvaizda:</p> <br /> 

    <div class="imagecontainer"> 
    <img class="last_img_img" src="https://i.imgur.com/I86rTVl.jpg" alt="" /> 
    </div> 

    <!-- Seperate them into different classes to style them later on --> 

    <div class="spancontainer"> 
    <span>A</span> 
    <span>A</span> 
    <span>A</span> 
    <span>A</span> 
    <span>A</span> 
    </div> 

</div> 

CSS

.last_img{ 
    width: 100%; 
} 

.imagecontainer{ 
    float: left; 
} 

.spancontainer{ 
    float: right; 
} 

Click Here for JS Fiddle Example

Recap: Ich trennte die beiden Elemente in verschiedenen divs so, dass ich die Kontrolle über die div-Tags mit CSS statt.

enthalten ich eine Klasse für die ersten div Bild Container mit dem Namen, der so float links eingestellt ist, dass das Bild auf die linke Seite

und einen anderen div spancontainer haften, das Recht zu schweben so eingestellt, dass es bleiben wird das rechte neben dem Bild.

Ich mag es, eine globale div-Klasse zu setzen, so dass ich alle anderen darin kapseln kann und die globale Klasse auch eine bestimmte Breite auf der Seite selbst geben kann ... in diesem Fall setze ich es auf 100% und ich benutzte den Namen, den Sie verwendet ‚last_img‘ ich auch die zetin Klassen entfernt, wie man sie nicht so lange benötigen werden, da Sie nicht jede Spanne separat stylen gehen;)

this helps;)

+0

Also willst du das Bild unter dem Text? So schwebte ich auf der rechten Seite, habe ich eine neue JS-Fidel für dich erstellt >>> [Hier klicken für JS Fiddle Beispiel] (https://jsfiddle.net/ericscicluna/8gmjf2zc/) – Eric

Verwandte Themen