HTML/CSS: Expanding a float-left element to remaining width of parent

问题

For the life of me I can't figure this out. I have a container div with a specific width. And a few children div inside it. I want the last div to expand its width to fill in the remaining width left in the container. How can I do this?

Here's an example (also at http://jsfiddle.net/nbKAr/):

#container {
    width:200px;
    border: 1px solid red;
}
    
#container div {
    float:left;
    border: 1px solid black;
}

<div id="container">
    <div>a</div>
    <div>b</div>
    <div id="expandMe">expand me</div>
</div>

Let's say the divs with "a" and "b" combine for a total width of 50px. How can I make #expandMe 150px without using JavaScript?

回答1:

Can't be done without Javascript.

You may find some clever way to achieve the look visually, but there's no reliable way to do exactly what you describe.

回答2:

If you remove the float off your last item, with the #expandMe and then apply overflow:auto; to it, I think you'll get what you're looking for.

overflow: auto; after a floated element will cause the last element to fill the remaining space.

Here is my sample.

回答3:

Larsenal is right, this can't be done with div's. You can go old school and use a table, or just get a little more decisive and have the width's defined.

来源：https://stackoverflow.com/questions/3713573/html-css-expanding-a-float-left-element-to-remaining-width-of-parent