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

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

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

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

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

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

Есть ли еще способы как можно засунуть в ряд динамические блоки, чтобы они занимали 100% области ?
  • Вопрос задан
  • 1197 просмотров
Решения вопроса 3
1. display table, table-cell
2. flexbox
Пример
Ответ написан
Therapyx
@Therapyx
Data Science
https://jsfiddle.net/agzusff9/28/ пытался, пытался, и как-то не выходит) min-width не пашет в данном случае, НО не знаю как с цсс, на JS можно сделать так, что если div class button = 40px; то... class text будет сужаться быстрее, таким образом настроив нужное значение, можно избежать таких выпадов как у меня. Где-то я точно это видел, но найти не могу :( Погуглите, может у вас получится.
Ответ написан
cyber-jet
@cyber-jet
Я использую таблицу в таких случаях. Ещё это как-то хитро реализовано в bootstrap.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы