인라인 div 요소 맞춤

Question

div 요소를 올바르게 정렬하는 데 문제가 있습니다.

예를 들어

: 당신이 소개 한 다음, '중요한 사실'상자가 볼 수 http://www.journeywithandrew.com/messel-pit-fossil-site-unesco-site/

: 내 사이트에서.

내가 원하는 것은 '핵심 사실'상자를 가져와야한다는 것입니다. 따라서 상자의 마지막 줄은 소개 텍스트의 마지막 줄과 나란히 표시됩니다. 물론 '핵심 사실'상자를 둘러 쌀 소개 텍스트도 있습니다. 그래서 내가 원하는 것은 그 상자를 오른쪽 아래로 정렬하는 것입니다. 이것이 의미가 되길 바랄뿐입니다 ..

'주요 사실'상자에 음의 위쪽 여백을 넣으려고했지만 인트로 텍스트를 대체하지는 않습니다. 텍스트를 오버레이합니다.

제안 사항?

Answer 1

나는이 FIDDLE이 상자를 어디에 둘 것인지 생각하는 데 도움이 될 것이라고 생각합니다.

페이지 랩 또는 화면의 폭에 따라 (시행 착오)

, 텍스트 위치가 변경 될 수 있습니다.

CSS는

.page-wrap { 
    width: 600px; 
} 
.spacerdiv { 
    height: 100px; 
} 
.stuff { 
    float: right; 
    width: 100px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; 
    border: 1px solid black; 
    border-radius: 5px; 
} 

Answer 2

다음과 같은 일반적인 형식이 :

<div class="entry-content"> 
    <p>Some words</p> 
    <div class="keyfactsunescowrapper"> 
      <!-- This block --> 
    </div> 
</div> 

단락 태그, 블록 레벨 요소 인을, 새로운 라인에 다음 내용을 푸시합니다. 부유물은 그것을 존중하며 자신을 밀어 붙이지 않습니다.

그러나 단락 및 문제가 해결되기 전에 주요 사실 블록을 넣을 수 있습니다. 그것은 바로 떠 다니기 때문에 단락이 같은 줄에 흐르게하고 단락은 단락 이후에 새로운 줄로 밀어 넣지 않습니다.

<div class="entry-content"> 
    <div class="keyfactsunescowrapper"> 
      <!-- This block --> 
    </div> 
    <p>Some words</p> 
</div>