Как установить динамическую ширину на плавающем div?

Question

У меня есть контейнер div с 3 элементами div внутри (A, B и C). Я буду знать ширину контейнера и ширину A и B) проблема в том, что в некоторых случаях B не будет, и в этом случае мне потребуется C для расширения, чтобы заполнить оставшуюся часть контейнера. Как бы я сделал это с прямым CSS или мне нужно будет использовать Javascript для расчета ширины?

Спасибо.

Answer 1

В вашем экзамене contaner div имеет ширину 400 пикселей. Общая ширина div a и div b составляет 495 пикселей!

Это больше, чем ширина контейнера, и поэтому div c покрывал только 400 пикселей.

Но если вы измените ширину контейнера примерно на 900 пикселей, вы увидите, что div c занимает оставшуюся часть пространства. Вот посмотрите: http://jsfiddle.net/SWQ6h/3/.

Answer 2

Вы можете использовать JQuery для вычисления ширины буквы "C" вдоль линий

var Container = $('#container').width();
var A = $('#A').width();
var B = $('#B').width();
var C = Container - (A+B);
$('#C').css('width', C +'px');

Я не проверял это, но вы поняли.

Answer 3

Я собираюсь предложить другой отдельный ответ, используя селекторы CSS 3. Мой другой ответ, хотя и простой и элегантный, может быть неприменим к вашей конкретной ситуации.

Более пуленепробиваемый способ достижения того, что вы ищете, это:

CONTAINER { width: 1000px }
CONTAINER A { width: 250px }
CONTAINER B { width: 250px }
CONTAINER C { width: 750px }
CONTAINER B ~ C { width: 500px } /* if the B element is present, and is a sibling of C, reduce C's width to 500px */

Единственное предостережение этого метода в том, что элементы B и C должны быть братьями и сестрами, и, судя по звукам вещей, они в вашем случае.

Answer 4

Если вы не установите ширину вообще или высоту в этом отношении, то div не покажет, если в нем нет чего-то. Вы можете использовать атрибуты минимальной и максимальной ширины, чтобы помочь в этом.

В этом случае у меня будет: div для A, B и C, которые не имеют свойств и все плавают. Вокруг этих элементов div у меня будет контейнер div с определенной шириной и высотой, а переполнение будет скрыто. Я бы дал соответствующие максимальные значения ширины A, B и C (не уверен, что когда-нибудь возникнет ситуация, когда, скажем, B и C отсутствуют, и A нужно заполнить).

Answer 5

Используя селекторы CSS 3, вы можете сделать что-то вроде этого:

CONTAINER { width: 1000px }
CONTAINER A { width: 250px }
CONTAINER B { width: 250px }
CONTAINER C { width: 500px }
CONTAINER A + C { width: 750px } /* if C is next to A in the source, and assuming B is therefore not present, increase C's width to 750px. */

Конечно, этот метод требует, чтобы элемент C непосредственно следовал за A в источнике. Кроме того, стоит упомянуть, что селектор + (так же как и множество других замечательных CSS3) не поддерживается в IE6, но поддерживается в IE7, IE8 и всех других браузерах класса А.

Я могу только молиться, чтобы вы увидели свет и уже опустили IE6.