Wie ordne ich den Text korrekt in html

Question

Ich versuche, den Text nach rechts wie die erste Zeile auszurichten, aber die zweite Zeile bleibt unter dem Bild verschütten. Wie mache ich den Text richtig ausgerichtet, unabhängig von der Anzahl der Zeilen?

<a href="javascript:;" id="A_3"><i id="I_4"></i></a><span id="SPAN_5">  
</span> 
<h5 id="H5_6">Payroll</h5> 
    <p id="P_7"> 
     What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv</p> 

Kontrolle der jsbin bitte:

Edit: Ich sehe, dass Safari (1) Dies ist korrekt angezeigt, aber Google Chrome (2) nicht.

Answer 1

ich es fest von

margin: 0px 25px 80px; 

Zugabe

zum A_3 Elemente (der Bootstrap-Kreis)

Vielen Dank für Ihre Hilfe!

Answer 2

http://jsbin.com/qigitoyeyo/1/edit?html,css,output

können Sie einstellen, nur "margin-right: 115px;" auf dem <p> Tag.

So müssen Sie die Höhe und Breite nicht manuell einstellen.

Answer 3

Entfernen Sie box-sizing: border-box; von beiden Elementen. Fügen Sie auch width: 457.5px; zu #H5_6

hinzu. Überprüfen Sie den folgenden Code.

#A_3 { 
 
    float: right; 
 
    height: 65px; 
 
    text-align: center; 
 
    width: 65px; 
 
    background: rgb(153, 153, 153) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border-radius: 50% 50% 50% 50%; 
 
    font: normal normal normal normal 35px/50px'Open Sans', arial, sans-serif; 
 
} 
 
/*#A_3*/ 
 

 
#H5_6 { 
 
    text-align: right; 
 
    width: 457.5px; 
 
} 
 
/*#H5_6*/ 
 

 
#P_7 { 
 
    color: rgb(95, 95, 95); 
 
    height: 56px; 
 
    text-align: right; 
 
    width: 457.5px; 
 
    font: normal normal 300 normal 16px/30.8px'Open Sans', arial, sans-serif; 
 
} 
 
/*#P_7*/

<a href="javascript:;" id="A_3"><i id="I_4"></i></a><span id="SPAN_5"></span> 
 
<h5 id="H5_6"> 
 
\t \t \t Payroll 
 
\t \t </h5> 
 
<p id="P_7"> 
 
    What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv 
 
</p>