CSS - Float to max width

问题

So I am making a row of items in a semi elastic container. There is a profile image on the left, and then content floated to the right of it (both float left).

What I am trying to do is make the content float be max possible width instead of min possible width (as floating causes).

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>

回答1:

It doesn't make much sense to float something when you want it to expand to fill the parent. Just remove the float: left and the width properties from the .info division so that it will expand to fill the width of the parent and then add a margin-left: 100px to push it out from under the one that is still floated to the left.

回答2:

if you are floating any element you have to give its parent element, 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;
}

来源：https://stackoverflow.com/questions/8146908/css-float-to-max-width