CSS: растягивание элемента для заполнения доступного горизонтального пространства контейнера

Например, у меня есть div 200px, содержащий три кнопки, текст минимален, поэтому кнопки не заполняют доступное горизонтальное пространство. Можно ли...

Сделать последнее растягивание кнопки занимать все оставшееся пространство?
Первая кнопка растягивается, чтобы заполнить оставшееся пространство нажатием двух последних кнопок:
Средняя кнопка растягивается, чтобы заполнить оставшееся пространство нажатием последней кнопки?

Ответ 1

Я понял, что настоящая проблема - это кнопки, которые не будут растягиваться, пока вы не дадите им явную ширину (то есть ширину: 100%). Вам все еще нужны таблицы-ячейки, хотя для ограничения этой 100% модели "что подойдет". Вы можете просто установить 33% для каждой кнопки, но это не сработает, если ваши кнопки будут добавляться динамически (если вы не подсчитаете проценты на сервере).

МЕТОД 1 (не работает): Кнопки не расширяются, чтобы соответствовать строке (т.е. display: table-cell, похоже, игнорируется).

<div style="display:table;width:200px">
    <div style="display:table-row">
        <button style="display:table-cell">1</button>
        <button style="display:table-cell">2</button>
        <button style="display:table-cell">3</button>
    </div>
</div>

Для IE до IE8 вам нужно будет подавать реальную таблицу или совместимость script как IE8-js. Основная концепция достаточно проста:

<!--[if ie lt 8]>
<script><!--pseudo-code, not real js-->
for (el in getElementsByTagName('button')) {
    if el.style.find('display:table-cell') {
        el.innerHTML = '<td><button>'+el.innerHTML+'</button></td>'
    }
}
</script>
<![endif]-->

МЕТОД 2 (работает): Хм... Ну по какой-то причине дисплей: стиль таблицы-таблицы не работает на элементах кнопок. Я смог сделать это с некоторой дополнительной разметкой, хотя.

<div style="display:table;width:500px;">
    <div style="display:table-row">
        <div style="display:table-cell"> <button style="width:100%">1938274</button> </div>
        <div style="display:table-cell"> <button style="width:100%">2</button> </div>
        <div style="display:table-cell"> <button style="width:100%">3</button> </div>
    </div>
</div>

Я признаю, что это не очень, но это обеспечит заполнение всего горизонтального пространства. Его можно немного очистить, используя классы, такие как эта демонстрация, которую я собрал. Тем не менее, в сочетании с недостатками IE это, вероятно, случай, когда я бы сказал, игнорируя пуристов и просто использую таблицу:

<style>table button {width:100%}</style>

<table style="width:500px;">
    <tr> <td><button>1938274</button> <td> <button>2</button> <td> <button>3</button> </tr>
</table>

Ответ 2

Как и Робертс:

HTML

<div id="container">
    <button id="one">One</button><button id="two">Two</button><button id="three">Three</button>
</div>

CSS

div#container {
    border: solid 1px;
    width: 200px;
}

div#container button {
    width: 33%;
}

div#container button:last-child {
    width: 34%;
}

Это не допускает компоновки жидкости: # ширина контейнера должна быть известна, тогда вы делаете математику.

Чтобы создать жидкую компоновку, вам нужно прыгнуть в мир абсолютного позиционирования:

div#container {
    border: solid 1px;
    width: 50%; /* resize your browser window to see results */

    position: relative;
}

div#container button {
    position: absolute;
    width: 50px;
}

button#one {
    top: 0;
    left: 0;
}

button#two {
    top: 0;
    left: 55px;
}

button#three {
    width: auto !important; /* get rid of the 50px width defined earlier */
    top: 0;
    left: 110px;
    right: 0px;
}

Следите за высотой # контейнера. Это исчезло, так как все его дети в этом примере абсолютно позиционированы - вы можете видеть это с границы.

Ответ 3

Не можете ли вы просто установить ширину так...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>test css button stretch</title>
<style>

#btn_container 
{
   width: 200px;
}
#btn_container button
{
   width: 20%;
}
#btn_container button.stretch
{
   width: 58%;
}
</style>
</head>
<body>

<div id="btn_container">
<p>last button stretch...</p>
<button type="button">eat</button>
<button type="button">drink</button>
<button class="stretch" type="button">sleep</button>
<br>
<p>first button stretch...</p>
<button class="stretch" type="button">eat</button>
<button type="button">drink</button>
<button type="button">sleep</button>
<br>
<p>middle button stretch...</p>
<button type="button">eat</button>
<button class="stretch" type="button">drink</button>
<button type="button">sleep</button>
</div>
</body>
</html>

Кажется, что он получил желаемый эффект, является текущим (если ширина контейнера кнопки div изменена или установлена на%) и работает в IE, Firefox и Opera.

edit: удаленный избыточный класс btn; набрал ширину% для класса растяжения; добавил doctype. Оставленные типы включены, могут быть удалены с технической точки зрения только для примера, но meh.

@rpflo: типы там, потому что мои кнопки в этом примере не представляют кнопки отправки. Если они были частью формы и были отправлены, я бы оставил их, так как по умолчанию используется тип = submit. (W3C HTML BUTTON)