Получить элемент для использования максимальной доступной ширины в зависимости от того, сколько экземпляров элемента есть

Question

Допустим, у меня есть неизвестное количество элементов, и я хотел расширить их следующим образом:

1 element:
[========]

2 elements:
[===][===]

3 elements:
[===][===]
[========]

4 elements:
[===][===]
[===][===]

и т. Д., [===] s являются элементами.

Добавитьк странности этого вопроса, страница будет когда-либо просматриваться только в рамках webkit, поэтому элементы -webkit полностью разрешены, даже если у них нет эквивалентов -moz.

Существует ли единственный способ решения этой проблемы с помощью CSSпроблема?Если нет, то есть ли JS-минимальный способ решения этой проблемы?

Answer 1

Предполагая, что разметка будет выглядеть примерно так:

<div class="container">
    <div>1</div>
</div>

<div class="container">
    <div>1</div>
    <div>2</div>
</div>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Это создаст макет, который вы хотите:

.container div {
    float: left;
    width: 50%;
}
.container div:last-child:nth-child(2n+1) {
    width: 100%;
}

По сути, он говорит, что ширина должна составлять 50%, но когда есть нечетный номерпоследний ребенок сделает это на 100%. Вот полный пример .

Answer 2

Вы можете сделать это легко с JQuery. Что-то вроде:

$(".container").each(
    function(index,item) {
        if (index>0) {
            var prev = $(item).prev();
            if (prev.width() >= $(item).width()) {
                var width = $(prev).width()/2
                $(prev).width(width);
                $(item).width(width);
            }
        }
    }
);

Где " container " - имя класса этих элементов.