Textausrichtung für die Homepage

Question

ich suche den Code auf der linken Seite des Bildschirms zu verdoppeln und haben es auf der rechten Seite des Bildes sitzt. Ich habe float left versucht, obwohl dies nur den Text durcheinander bringt und nicht richtig neben dem iPhone-Bild sitzt. services 2 auf der css ist für die rechte seite text auf dem bildschirm und die services css ist für den text auf der linken seite des bildschirms. Hier ist mein Code.

<div class="services2"> 
      <p> Screen Repair <span><br/>Example: Cracked glass/touch 
    screen, dark ink like blemishes, touch screen non responsive, screen 
discolouration. <br/><br/> </span> </p> 
      </div> 



    <div class="services2"> 
      <p> External Button Repair <span><br/> Example: sleep wake 
button unresponsive, volume up and volume down buttons no longer working 
correctly, home button not working <br/><br/> </span> </p> 
      </div> 



    <div class="services2"> 
      <p>Battery Repair <span> <br/> Example: where you have to charge 
your device more often than usual and the device runs out of power quicker 
and quicker.<br/> <br/> </span> </p> 
      </div> 



    <div class="services2"> 
      <p> Charging Port Repair <span><br/> Example: whilst plugged in 
    your device no longer charges up. </span> </p> 
      </div> 

CSS:

.services{ 
width:25%; 
margin-left:2%; 
margin-top:2%;} 


.services p{ 
font-family:narrow; 
font-size:21px; 
text-align:center;} 


.services span{ 
text-align:center; 
font-family:narrow; 
font-size:18px; 
color:#525353;} 



.services2{ 
width:25%; 
margin-left:2%;} 


.services2 p{ 
font-family:narrow; 
font-size:21px; 
text-align:center;} 

.services2 span{ 
text-align:center; 
font-family:narrow; 
font-size:18px; 
color:#474747;} 

Answer 1

immer einen Wrapper verwenden.
Legen Sie die Breite des Deckblattes so fest, wie Sie möchten. Sie können es ändern, um es genau nach rechts vom Bild zu bringen.
Legen Sie die Eigenschaft wrapper text-align auf left fest.
Zeitraum.

#wrapper { 
 
float:right; 
 
width:30%; 
 
text-align:left; 
 
} 
 
.services{ 
 
margin-left:2%; 
 
margin-top:2%;} 
 

 

 
.services p{ 
 
font-family:narrow; 
 
font-size:21px; 
 
text-align:center;} 
 

 

 
.services span{ 
 
text-align:center; 
 
font-family:narrow; 
 
font-size:18px; 
 
color:#525353;} 
 

 

 

 
.services2{ 
 
margin-left:2%;} 
 

 

 
.services2 p{ 
 
font-family:narrow; 
 
font-size:21px; 
 
text-align:center;} 
 

 
.services2 span{ 
 
text-align:center; 
 
font-family:narrow; 
 
font-size:18px; 
 
color:#474747;}

<div id="wrapper"> 
 

 
<div class="services2"> 
 
      <p> Screen Repair <span><br/>Example: Cracked glass/touch 
 
    screen, dark ink like blemishes, touch screen non responsive, screen 
 
discolouration. <br/><br/> </span> </p> 
 
      </div> 
 

 

 

 
    <div class="services2"> 
 
      <p> External Button Repair <span><br/> Example: sleep wake 
 
button unresponsive, volume up and volume down buttons no longer working 
 
correctly, home button not working <br/><br/> </span> </p> 
 
      </div> 
 

 

 

 
    <div class="services2"> 
 
      <p>Battery Repair <span> <br/> Example: where you have to charge 
 
your device more often than usual and the device runs out of power quicker 
 
and quicker.<br/> <br/> </span> </p> 
 
      </div> 
 

 

 

 
    <div class="services2"> 
 
      <p> Charging Port Repair <span><br/> Example: whilst plugged in 
 
    your device no longer charges up. </span> </p> 
 
      </div> 
 
      
 
<div>