Как расположить 2 блока в ряд с динамической шириной?

Question

[nepster-web]

К пример есть 2 блока, которые должны стоять в ряд вот так:


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

Есть несколько способов как поставить эти кнопки в ряд:
1) overflow: hidden и float: left.
Не подходит так как: overflow: hidden закрывает возможность выпадающих элементов + мы не знаем конкретную ширину не одного блока

2) Указать например 80% и 20%
Не подходит так как: кнопка может сузиться или расшириться, в результате чего будет либо вылезать либо будут проблемы.

3) Таблицы
Вроде подходит но как-то сомнительно.

Есть ли еще способы как можно засунуть в ряд динамические блоки, чтобы они занимали 100% области ?

Answer 1

[Алексей Зуев]

1. display table, table-cell
2. flexbox
Пример

Comments

[nepster-web]

а fkexbox уже можно использовать, вроде caniuse.com показывает не плохие показатели ?

[Алексей Зуев]

nepster09: многие еще побаиваются применять флексбок Что делать с FlexBox в Internet Explorer 8, 9?. Но старые браузеры отмирают, с помощью флексбокса можно легко сделать вещи, которые с помощью блочно-табличной верстки делать очень сложно, а порой и невозможно. Если рассматривать мой пример, то есть такая статья, где сравнивают два этих метода по скорости.

[nepster-web]

Алексей Зуев: ну я вообще заглушки ставлю до ие 10. Вопрос в мобильных устройствах.

Answer 2

[Therapyx]

https://jsfiddle.net/agzusff9/28/ пытался, пытался, и как-то не выходит) min-width не пашет в данном случае, НО не знаю как с цсс, на JS можно сделать так, что если div class button = 40px; то... class text будет сужаться быстрее, таким образом настроив нужное значение, можно избежать таких выпадов как у меня. Где-то я точно это видел, но найти не могу :( Погуглите, может у вас получится.

Comments

[nepster-web]

ну таблицы отлично тут работают, но как и js это как-то смущает. Я как-то сомнительно отношусь, когда js помогает верстке. Может это зря, как думаете ?

[Therapyx]

nepster09: Думаю так, что есть такие вещи, которые только с цсс никак не сделать. Я по большей части занимаюсь бекендом, но знаю точно, что любой хороший фронтендщик обязан просто знать JS =) CSS хоть и развивается, но все же слишком еще далеко от возможного функционала JS. И юзать JS при верстке это никак не плохо)

[Therapyx]

nepster09: а таблицы как

[Therapyx]

nepster09: блин коммент сломался, таблицы как table? ili классы с присвоенными тейбл-роу, тейбл-целл?

[nepster-web]

Therapyx: классы конечно-же =). Нет тут вопрос такой, что если у клиента выключен js то вся верстка поедет.

Answer 3

[Евгений]

Я использую таблицу в таких случаях. Ещё это как-то хитро реализовано в bootstrap.