Ausrichten von Bild zu gleichem Rand wie Text rechts ausgerichtet

Question

Wie würden Sie Text (eine Liste) nach rechts ausrichten und ein Bild über ihm auch nach rechts ausgerichtet haben, aber beide haben feste und 10% von der linken Seite entfernt des Bildschirms. Ich möchte auch, dass beide Elemente behoben werden. Ich habe einen Codepen, wenn jemand einen Link dazu möchte, aber es ist super einfach und hat nicht den gewünschten Effekt. Ich möchte das im Grunde nur als meinen "Header" haben und dann den Körper der Seite auf der rechten Seite haben. Zum Beispiel:

 ########    body-------> 
     #  # 
     #  #    body-------> 
     #  # 
     ########    body-------> 


          body-------> 


      Item 1    body-------> 
      Item 2 
    Item Number 3 
     Item #4    body-------> 

Answer 1

Ich habe eine JSFiddle können Sie betrachten.

HTML

<div id="header"> 
    <img src="http://placehold.it/100x100"> 
    <ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item Number 3</li> 
    <li>Item #4</li> 
    </ul> 
</div> 
<div id="body"> 
    BODY 
</div> 

CSS

#header, 
#body { 
    display: inline-block; 
} 

#header { 
    width: 40%; 
    float: left; 
    text-align: right; 
} 

#header img, 
#header ul { 
    padding-right: 10%; 
} 

ul { 
    list-style: none; 
} 

#body { 
    width: 60%; 
    float: right; 
} 

Die Breiten des Kopf- und Körper kann zu dem, was jemals ändern Sie es wünschen. Lass es mich wissen, wenn du etwas anderes machen willst.

Sie können auch die padding-right: 10%; in eine margin-right: 10% ändern, je nachdem, welche CSS Sie anwenden.