바닥 글을 절대 위치에 배치하는 방법 높이를 조정하는 방법은 무엇입니까?

Question

I는 다음 페이지를 가지고

• 표제 상위
가 최대로 표제 아래
• 화상
• 페이지 콘텐츠 멋지게 오른쪽 정렬 왼쪽 이미지 아래
• 링크 폭 왼쪽 이미지
• 바닥 글 (문제)

내 콘텐츠 NEX의 위치를 ​​절대 위치를 사용하고 있습니다 이미지에. 내 문제를 해결할 수있는 인라인 블록 또는 부동 소수점이 가능하면 확실하지 않습니다.

지금 내 문제는 절대 배치 된 콘텐츠의 높이가 떨어져서 바닥 글이 내 콘텐츠와 겹치는 것입니다.

JSFiddle는 : https://jsfiddle.net/sc3e1t15/

.wrapper { position: relative; } 
 
.title, 
 
.footer { font-weight: bold; } 
 
.image { font-style: italic; width: 210px; border: 1px solid red; } 
 
.links { max-width: 210px; } 
 
.content { position: absolute; top: 18px; left: 220px; border: 1px solid green; }

<div class="wrapper"> 
 
    <div class="title"> 
 
    I'm the title. 
 
    </div> 
 
    <div class="image"> 
 
    I'm an image. 
 
    </div> 
 
    <div class="links"> 
 
    I'm some links.<br> 
 
    I want to be on the left side too! 
 
    </div> 
 
    <div class="content"> 
 
    I'm the content.<br> 
 
    I want to be shown neatly next to the image.<br> 
 
    Spread over multiple lines<br> 
 
    Nothing to see here<br> 
 
    Staph reading me!<br> 
 
    Love you brah. 
 
    </div> 
 
    <div class="footer"> 
 
    I'm a problem ... Because I disrespect the contents height. 
 
    </div> 
 
</div>

Answer 1

이 시도. 왼쪽에 원하는 내용을 감싸고 표시 속성을 지정하십시오.

{디스플레이 인라인 블록;}

현재 위치를 사용하여 필요 없음.

.wrapper { position: relative; } 
 
.title, 
 
.footer { font-weight: bold; } 
 
.image { font-style: italic; width: 210px; border: 1px solid red; } 
 
.links { max-width: 210px; } 
 
.content { display:inline-block; border: 1px solid green; } 
 
.left-contain { display: inline-block; vertical-align: top;}

<div class="wrapper"> 
 
<div class="title"> 
 
    I'm the title. 
 
    </div> 
 
<div class="left-contain"> 
 
    <div class="image"> 
 
    I'm an image. 
 
    </div> 
 
    <div class="links"> 
 
    I'm some links.<br> 
 
    I want to be on the left side too! 
 
    </div> 
 
</div> 
 
    <div class="content"> 
 
    I'm the content.<br> 
 
    I want to be shown neatly next to the image.<br> 
 
    Spread over multiple lines<br> 
 
    Nothing to see here<br> 
 
    Staph reading me!<br> 
 
    Love you brah. 
 
    </div> 
 
    <div class="footer"> 
 
    I'm a problem ... Because I disrespect the contents height. 
 
    </div> 
 
</div>