CSS：在相對對象的絕對對象，忽略容器流從我的觀點

Question

，該fittedImageRight和文本是兩個相對定位的容器，那麼爲什麼文本忽略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，它會將其從頁面流中移出，這就是爲什麼它不能識別容器的高度。此外，如果您希望圖像容器調整到圖像的高度，則需要移除高度或將其設置爲自動。