이미지를 텍스트와 동일한 여백으로 정렬 정렬

Question

어떻게 텍스트 (목록)를 오른쪽으로 정렬하고 그 위에 이미지가 오른쪽으로 정렬되었지만 왼쪽에서 고정되어 10 % 떨어져 있어야합니다 화면의. 나는 또한 두 요소가 고정되기를 바란다. 누구든지 링크를 원한다면 나는 codepen을 가지고있다. 그러나 그것은 매우 간단하고 내가 원하는 효과가 없다. 나는 기본적으로 이것을 "헤더"로 사용하고 사이트의 오른쪽 부분을 본문으로 사용합니다. 예 :

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


          body-------> 


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

Answer 1

나는 당신이 볼 수있는 JSFiddle입니다.

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; 
} 

당신의 헤더와 본문의 폭은 당신이 원하는 무엇을 적으로 변경할 수 있습니다. 다른 일을 원한다면 알려주세요.

적용 할 CSS에 따라 padding-right: 10%;을 margin-right: 10%으로 변경할 수도 있습니다.