Question

所以我在半弹性容器中制作了一排物品。左侧有一个配置文件图像，然后内容浮动到它的右侧（两个都向左浮动）。

我要做的是让内容浮动为最大可能宽度而不是最小可能宽度（作为浮动原因）。

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: left分区移除.info和宽度属性，以便它会展开以填充父级的宽度，然后添加margin-left: 100px以将其从仍然漂浮在左边。

Answer 2

如果你要浮动你必须给它的父元素的任何元素，请清除：both，overflow：hidden;。

#container {
width: 800px;
clear: both;
overflow: hidden;
}

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

CSS - 浮动到最大宽度

2 个答案: