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

您可以通过flex css轻松完成此操作

在父div上尝试以下

display:flex
Flex-direction:row

现在在父div中创建2个div并将图像放在一个div中并将文本放在另一个div中并将以下内容添加到每个div的css

flex:1

现在你的div宽度相等，并排排列。现在说你要调整你的图像，你可以通过在这个div上给出填充或边距顶部或再次使用flex来轻松地完成它。

希望有所帮助

CSS - 如何将元素高度设置为具有自动高度的容器的％？

1 个答案: