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

Question

Это в основном страница сравнения, где вы можете сравнить 2-5 продуктов.

Мне нужно знать, есть ли у меня 5 плавающих делителей в главном.Все 5 дивов создаются динамически.Когда пользователь выбирает 5 товаров для сравнения, то главное заполнено на 5 дел.Но в случае, если пользователь выбирает только 2 продукта для сравнения.2 деления не заполняют пространство и только покрывают ширину для 2 делений.Я хочу, чтобы они заполнили основной контейнер.

Надеюсь, у меня есть смысл.Дайте мне знать, если вам нужен код для справки.

Можно использовать JavaScript и jQuery.

Answer 1

Хотел бы отметить, что вы можете использовать проценты, но это тоже не сработает.Если вы можете установить имена классов на стороне сервера (например, php-скрипт, который знает, сколько столбцов должно быть показано), вы можете определить

.twoColumnLayout{
  width:50%;
}

и

.threeColumnLayout{
  width:33%;
}

...

Но это было бы проще, если бы вы использовали javascript (например, с jQuery), где вы могли бы определить, сколько есть columsn, а затем динамически установить с каждого столбца на странице.

Answer 2

$("<div>").insertAfter(element).css("width", 99 / countColumns + "%")

99 есть (не 100), потому что некоторые браузеры не любят 100% ширину с полосами прокрутки и фактически оборачивают содержимое (вы также можете установить переполнение: скрытый).

Мой jQuery-фу немного ржавеет, и я вдали от своей буровой установки, но приведенный выше пример должен работать .....: p