CSS - 浮动至最大宽度

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>

- Quinton Pike

---

所以，您希望“info” div仅在宽度从400px变化到700px？ - Ayush

Answer 1

如果你想让一个元素扩展到填满父元素的宽度，那么浮动这个元素就没有太多意义了。只需要将 .info 元素的 float: left 和 width 属性移除，使其可以扩展到父元素的宽度，然后添加 margin-left: 100px 属性来将其推出仍向左浮动的元素下方。

- animuson

---

我认为我最终会这样做，只是好奇是否有一种方法让它们都浮动并尽可能扩展。 - Quinton Pike

Answer 2

如果你想让任何元素浮动，你必须给它的父元素添加 clear:both 和 overflow:hidden 属性。

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

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

- SiriusKoder