줄 바꿈이있는 인라인 단락 요소가 인라인으로 유지되지 않습니다.

Question

그래서 내 문제는 다음과 같습니다.

나는 이미지와 div (텍스트 포함)를 모두 포함하는 div가 있습니다. 텍스트는 줄 바꿈으로 구분 된 제목과 추가 내용을 포함합니다. 예를 보시려면 아래 또는 내 첨부 codepen을 참조하십시오.

<div class="outer"> 
    <img src="something.com/pic.png"> 
    <div class="inner"> 
    Title<br>Additional text. 
    </div> 
</div> 

여기 내 code pen

나는 내부 DIV 인라인의 표시 스타일을 적용 할 때, 제목이 인라인 이미지의 하단과 LINEBREAK 다음과 같은 텍스트가있는 이미지 아래에 있습니다. 또한 단락 태그에 텍스트를 래핑하면 모든 텍스트가 이미지 아래에 있습니다.

제목이 이미지의 위쪽과 오른쪽에 표시되고 내부 div의 모든 내용이 해당 정렬에 남아 있기를 원합니다. 텍스트가 이미지의 높이를 지나치더라도. 또한, 앞으로는 이미 존재하는 텍스트 아래에 내부 div 안에 추가 이미지와 텍스트가있는 div를 추가 할 것이며, 그 내용이 동일한 정렬을 유지하기를 바랍니다.

그리고 내 원하는 HTML 구조 :

<div> 
    <img> 
    <!--Start right indent (from top right of image) --> 
    <div> 
     <p>Title<br>text</p> 
     <div> 
      <img> 
      <div> 
       <p>Title<br>text</p> 
      </div> 
     </div> 
    </div> 
    <!--End right indent --> 
</div> 

Answer 1

내가 해결책을 발견 나타납니다

은 여기 내 최종 목표입니다.

.post img{ 
    display:inline-block; 
    vertical-align: top; 
} 

.post_content{ 
    display:inline-block; 
    width: 90%; 
} 

내 codepen : Code pen 그것은 표시처럼 보인다