フッターは絶対配置されたコンテンツの高さをどのように尊重するのですか？

Question

私は次のページを持っている：

• タイトルトップは画像の最大幅のタイトルきれいの右側に並ぶ画像左側
• ページの内容以下の
• リンクの下に
• を残しました画像
• フッタ（問題）

私は私のコンテンツ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>