如何使页脚尊重绝对定位的内容高度？

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>