如何使頁腳尊重絕對定位的內容高度？

Question

我有以下頁面：

• 標題左上
以下，最大標題
• 圖像寬度
• 左側
• 頁面內容的右側很好地對準下面的圖片鏈接圖像
• 頁腳（問題）

我使用絕對定位來定位我的內容NEX t到圖像。不知道這是可能的行內塊或浮動，這將解決我的問題。

我現在的問題是頁腳與我的內容重疊，因爲絕對定位的內容會丟失它的高度。

的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>