コンテンツブロックが下にプッシュされました

Question

私は現在、どちらの側にもコンテンツがあり、floatsleftまたはrighttopのいずれかの内容のマークアップを書いています。

ただし、コンテンツが左側または右側に多すぎると、コンテンツボックスは下に移動したくないが上に移動してから下に移動してギャップをカバーします。しかし、私はギャップが欲しいです。

例以下：これを以下で再現することはできません。試してみてください：https://jsfiddle.net/171f14cg/

article { 
 
    min-height: 450px; 
 
    position: relative; 
 
    margin-bottom: 120px; 
 
} 
 
article.art-white-bg { 
 
    color: black; 
 
} 
 
article.art-white-bg .content-area-push { 
 
    background-color: white; 
 
    box-shadow: 0px 18px 26px -5px rgba(0, 0, 0, 0.74); 
 
} 
 
article .content-area-push { 
 
    position: absolute; 
 
    min-height: 350px; 
 
    bottom: 0; 
 
} 
 
article.right-image figure { 
 
    right: 0; 
 
} 
 
article figure { 
 
    position: absolute; 
 
    max-height: 360px; 
 
    z-index: 1; 
 
} 
 
article.right-image .art-content { 
 
    float: left; 
 
    width: 30%; 
 
} 
 
article .art-content { 
 
    padding: 50px 45px; 
 
}

<article class="main-article right-image art-white-bg animated hidden visible fadeInUp"> 
 
    <div class="content-area-push"> 
 
    <div class="art-content"> 
 
     <header> 
 
     <h2>Working example cause of low amount of content</h2> 
 
     </header> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p> 
 
     
 
    </div> 
 
    </div> 
 
    <figure> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=52&amp;txt=550%C3%97350&amp;w=580&amp;h=360" alt="Baby Orang Utan hanging from a rope"> 
 
    </figure> 
 
</article> 
 

 

 
<article class="main-article right-image art-white-bg animated hidden visible fadeInUp"> 
 
    <div class="content-area-push"> 
 
    <div class="art-content"> 
 
     <header> 
 
     <h2>Example that does not work</h2> 
 
     </header> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p> 
 

 
    </div> 
 
    </div> 
 
    <figure> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=52&amp;txt=550%C3%97350&amp;w=580&amp;h=360" alt="Baby Orang Utan hanging from a rope"> 
 
    </figure> 
 
</article>

Answer 1

私はあなたがこのような何かを探していると思う：

https://jsfiddle.net/dee0gjaz/

は、私はいくつかの要素から属性の数を削除しました。基本的に、あなたは少しスタイリングしすぎていました。あなたのテキストコンテンツはabsoluteポジショニングを必要としませんでした。それは、それが親を伸ばすことができるように静的でなければならない。

ただし、イメージはabsoluteのままで、負の値はtopで、一貫したオフセットがあります。