2013-06-14 2 views
0

Я думал об этой проблеме и не могу найти идеальное решение.Использование CSS для гибкой компоновки с одним элементом фиксированной ширины

Предположим, у меня есть тег div с гибкой шириной. В этом div у меня есть еще 2 divs, один рядом с другим, используя float, абсолютную позицию или любой другой атрибут, который будет работать. Первый div имеет фиксированную ширину, например 100px. Второй div должен принимать 100% от любого горизонтального пространства.

Я попытался иметь как поплавок влево, первый div width: 100px second div position: absolute, left: 100px, width: 100%, но второй div будет слишком длинным и иметь дополнительную ширину 100px. Было бы неплохо, если бы css позволял что-то вроде ширины: 100% -100px.

+0

Допустим, вы отправили свой код, и тогда мы говорим, что кто-то может вам помочь. – PiLHA

+0

Здесь вы найдете: http://stackoverflow.com/questions/6809079/two-divs-side-by-side-one-100-width-others-width-depended-on-content/6809143#6809143. Существует также подход маржи, который отлично работает при условии, что ширина левого 'div' фиксирована: http://stackoverflow.com/questions/7718761/placing-div-on-same-line-as-image/7718824# 7718824 – thirtydot

ответ

3

Вы можете с помощью CSS3

width: calc(100% - 100px); 

Edit: здесь вы можете увидеть поддержку браузера http://caniuse.com/calc

+3

Обратите внимание, что, хотя это хорошее решение, поддержка браузера 'calc()' не велика, и нужно использовать какой-то резерв – Novocaine

+1

@ Novocaine88 Да, конечно! Я добавил ссылку на поддержку браузера – koningdavid

+0

Спасибо, не знал этого. Что напоминает мне, я должен взглянуть на все новые вещи в CSS3. – BringMeAnother

0

Вы можете увидеть: Expand a div to take the remaining width

Это объясняет концепцию под названием как " блок форматирования контекста ".. у вас может быть фиксированный блок слева или справа от вашего" расширяющегося "div

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