CSS - 如何將元素高度設置爲具有自動高度的容器的％？

Question

假設我有一個容器內的文本塊，並且容器的高度設置爲auto。所以，它的高度會隨着文本的變化而動態變化。

假設我在容器中也有一個圖像，它在文本旁邊浮動，我希望它能縮放到容器高度的某個百分比。

<div class="container"> 
<img style="height: 50%; float: left;" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84"><br> 
<p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p> 
</div> 

如果我將'容器'高度設置爲500px，圖像將縮放到250px的高度。如果我將「容器」的高度設置爲自動，但圖像的高度不會縮放至父級高度的50％。它根本不縮放。

如果可能，我還想在容器中沒有文本的情況下在「容器」上設置最小高度限制，但這不是高優先級。

Answer 1

您可以輕鬆地彎曲CSS繼父DIV做到這一點

嘗試

display:flex 
Flex-direction:row 

現在創建父DIV中2周的div並把圖像中的一個又一個和文字，並添加以下內容的CSS每個格

flex:1 

現在你divs是相等的寬度並排對齊。現在說你想調整你的圖像，你可以輕鬆地做到這一點，通過給予填充或邊緣頂部或在這個div上再次使用flex。

希望它可以幫助