Задачка на... позиционирование и ширину элементов

[Zverushka]

http://joxi.ru/pso6UxjKTJCUOHZbcMM

 

Смысл в следующем.

Есть 3 колонки.

1) Каждая колонка должна быть шириной с цифру - то есть иметь динамическую ширину, равную ширине жирных черных цифр. Чтобы если вдруг ввели число, больше на порядок - текст внизу автоматически стал шире и верстка не поехала.

2) А текст под цифрой должен подстраиваться под ширину цифр и сам переноситься на новую строку в зависимости от ширины.

 

Это возможно реализовать?

Edited April 1, 2014 by Zverushka

[Q4Dizzy]

так? http://jsfiddle.net/Ahri/x53bQ/

[Q4Dizzy]

Где такие задачки то берёшь? Если есть наподобии книги с задачами, поделись 

[Zverushka]

@Q4Dizzy, На макет смотрю и пытаюсь представить ситуацию, когда с большой вероятностью что-нибудь может измениться и пытаюсь сверстать элемент с учетом возможной динамики.

Все задачи получаются из головы .

@Q4Dizzy, неплохо, но получается высота блока будет неизвестной и элемент с цифрами не будет отодвигать блоки снизу, особенно если текста много, из-за этого теряется вся гибкость. 

[Q4Dizzy]

Тут легко поможет jquery. Или ты пытаешься всё сделать только путями CSS?

[Zverushka]

@Q4Dizzy, я часто использую jquery, но иногда я не вижу очевидных решений на css и часто на форуме дают очень замечательные советы, которые мне бы в голову не пришли.

Поэтому предлагаю задачку на мозговой штурм

Edited April 1, 2014 by Zverushka

[SelenIT]

На скорую руку придумалась такая модификация: http://jsfiddle.net/x53bQ/5/