CSS: линейный элемент растягивается, чтобы заполнить доступное горизонтальное пространство контейнера - PullRequest
Новая
       5

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

19 голосов
/ 13 июня 2009

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

  1. Сделать последнюю кнопку растянутой, чтобы занять все оставшееся пространство?

  2. Первая кнопка, которая растягивается, чтобы заполнить оставшееся пространство, нажимая две последние кнопки вдоль?

  3. Средняя кнопка растягивается, чтобы заполнить оставшееся пространство, нажимая последнюю кнопку вперед?

Ответы [ 3 ]

13 голосов
/ 13 июня 2009

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

МЕТОД 1 (не работает): кнопки не растягиваются, чтобы соответствовать строке (т. Е. Отображение: ячейка таблицы игнорируется). 

<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 вам нужно предоставить реальную таблицу или скрипт совместимости, например 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 голосов
/ 13 июня 2009

Аналогично Робертсу:

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;
}

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

0 голосов
/ 13 июня 2009

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

<!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; увеличил ширину% для класса стрейч; добавил тип документа. Оставьте типы включенными, технически могли бы быть удалены только для примера, но ме.

@ rpflo: там есть типы, потому что мои кнопки в этом примере не являются кнопками отправки. Если бы они были частью формы и отправлялись, я бы их отключил, так как по умолчанию это type = submit. ( КНОПКА HTML W3C )

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...