HTML / CSS: расширение элемента float-left до оставшейся ширины родительского элемента

Question

За свою жизнь я не могу понять это.У меня есть контейнер div с определенной шириной.И несколько детей делят внутри него.Я хочу, чтобы последний div расширил свою ширину, чтобы заполнить оставшуюся ширину, оставленную в контейнере.Как я могу это сделать?

Вот пример (также на 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>

Допустим, элементы div с "a" и "b" объединяются для общей ширины 50 пикселей.Как я могу сделать #expandMe 150px без использования JavaScript?

Answer 1

Если вы удалите float с вашего последнего элемента с помощью #expandMe, а затем примените к нему overflow:auto;, я думаю, вы получите то, что ищете.

overflow: auto; после плавающего элемента заставит последний элемент заполнить оставшееся пространство.

Вот мой образец.

Answer 2

Ларсенал прав, это нельзя сделать с помощью дивов. Вы можете пойти в старую школу и использовать стол, или просто стать немного более решительным и иметь определенную ширину.

Answer 3

Не может быть сделано без Javascript.

Вы можете найти какой-нибудь умный способ визуального оформления, но нет надежного способа сделать именно то, что вы описываете.