2013-10-26 6 views
2

Как сделать два текстовых поля динамически заполнять заданное пространство. На реальной странице вторая текстовая область не обертывается, поэтому ширина не имеет значения. Но как я могу получить коробку с числами для расширения до точной ширины самой длинной строки чисел?textarea не расширяется, чтобы содержать контент

#container{ 
    width:250px; 
    border:1px solid black; 
} 
textarea{ 
    float:left; 
    height:150px; 
    font-family:monospace; 
    text-align:right; 
} 
#t1{ 
    width:auto; 
    min-width:10px; 
    max-width:50px; 
    margin-right:4px; 
} 
#t2{ 
} 

width:auto, похоже, не работает. И мои эксперименты с min-width и max-width также бесполезны.

JSBIN

+0

Вы должны опубликовать скрипку для вашей проблемы – Rex

+0

@Rex бы один готовый, просто забыл связать его><Спасибо за напоминание! – 1252748

+1

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

ответ

0

Попробуйте использовать box-sizing: border-box с процентными ширин:

textarea { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 50%; 
} 

Удалить специфические стили для #t1 и #t2, можно задать ширину для каждого, если это необходимо, подводя до 100%.

Обновлено jsbin: http://jsbin.com/udeLafO/19/edit

Смежные вопросы