Question

在右边的div中，我有一个图像和一个链接。可能加载的图像具有多种宽高比（从0.38到6.83），我无法控制源图像，但它们需要具有适当的宽高比。要做到这一点，我已经给它.owner-info-container但是图像通常比那个宽度更薄。

我试图让第一个div（.primary-image-container）占用第二个div（max-width）不使用的父级中的所有剩余空格。如果图片没有占据<div class="owner-address col-xs-12"> <div class="owner-info-container"> <h3>Address</h3><br/> <span class="owner-info"> <span class="header">Owner Name</span><br/> <span>Name goes here</span> </span> </div> <div class="primary-image-container"> <img /> <a>Send us an updated photo</a> </div> </div>允许的整个空间，我希望左边的容器不要将其留作空格。

我已经搞砸了第二个div，但是如果第一个div的内容太宽，它就不会闯入新的一行，它只会推动第二个div下来。

HTML

{{1}}

Answer 1

您可以使用documentation完成此操作。

如果您将display: flex;分配给.owner-address课程，然后将.owner-info-container flex-grow: 1;分配给.owner-address，则会占用.owner-address { display: flex; } .owner-info-container { flex-grow: 1; }内的剩余空间

<强> CSS

Compile Sources

<强> flexbox

两个div并排，右边的宽度由其内容决定，左边的占用所有可用空间？

1 个答案: