CSS：相対的なオブジェクト内の絶対的なオブジェクトは、コンテナが私のポイントから

Question

を流し無視して、fittedImageRightとテキストは、2つの相対位置付けコンテナである、なぜテキストがfittedImageRightコンテナのheigthを無視していますか？

さまざまな画像を読み込んで切り抜いて中央に配置し、その下のテキストが画像の高さに適応したいと思っています。

私はこれに新しいので、何か助けていただければ幸いです。

.text { 
 
    font-size: 15px; 
 
} 
 

 
.containerRight { 
 
    position: relative; 
 
    width: 900px; 
 
    height: 800px; 
 
    border: 1px solid #000000; 
 
} 
 

 

 
.fittedImageRight { 
 
    position: relative; 
 
    width: 900px; 
 
    height: 100px; 
 
    float: left; 
 
} 
 

 
.fittedImageRight img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    height: 100%; 
 
    width: auto; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    -ms-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
} 
 

 
.fittedImageRight img.portrait { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="containerRight"> 
 
    <div class="fittedImageRight"><img class="portrait" src="A.png"></div> 
 
    <div class="font text"> 
 
    Lorem ipsum dolor sit amet,...</div> 
 
</div>

ありがとう！

Answer 1

テキストのみを画像の下に置きたい場合は、何も浮かべる必要はありません。 divを浮動させると、ページの流れから取り除かれます。その理由は、コンテナの高さを認識しないからです。また、イメージコンテナをイメージの高さに合わせて調整する場合は、高さを削除するか、autoに設定する必要があります。