html - CSS - float 到最大宽度

Question

所以我在半 flex 容器中制作了一排元素。左边是个人资料图片，然后内容 float 到它的右边(都向左浮动)。

我想做的是使内容 float 为最大可能宽度而不是最小可能宽度(作为 float 原因)。

CSS:

#container {
   max-width: 800px;
   min-width: 500px;
}
.profile {
   float: left;
   width: 100px;
}
.info {
   float: left:
   min-width: 400px;
   max-width: 700px;
}

HTML:

<div id="container">
    <div class="profile">
        IMG
    </div>
    <div class="info">
        INFO
    </div>
</div>

Answer 1

当您希望某物扩展以填充父级时， float 它没有多大意义。只需从 .info 部分中删除 float: left 和 width 属性，这样它就会扩展以填充父级的宽度，然后添加一个 margin- left: 100px 将其从仍向左浮动的下方推出。