CSS — квадрат из четырех элементов div, где, если какие-либо из них скрыты, все оставшееся пространство заполняется. ⇐ CSS

[Anonymous]

Итак, у меня есть очень простой набор элементов div в контейнере.

Код: Выделить всё

В настоящее время у меня есть CSS, благодаря которому эти поля занимают только половину ширины контейнера, поэтому они отображаются в сетке 2x2 (это работает так, но я не уверен, правильно ли я это делаю). у меня неправильные элементы отображения):

Код: Выделить всё

.container {
display: block;
}

.corner {
width: 50%;
display: inline-block;
position: relative;
}

.right {
float: right
}

Наконец, у меня есть JS, который скрывает любые поля, если они не содержат текста. Есть несколько правил:

[*]BoxAlways ВСЕГДА содержит текст и никогда не исчезнет.
[*]В других полях не будет текста, начинающегося с последнее поле, поэтому могут возникнуть только следующие обстоятельства:
[*]все три поля могут быть пустыми.
[*]поле 1 может содержать текст, а поля 2 и 3 могут быть пустыми. пустое
[*]поле 1 и 2 может содержать текст, а поле 3 может быть пустым.
[*]все три поля могут содержать текст.

Вот что я хочу сделать с CSS, но не могу понять. Если имеется нечетное количество полей, я хочу, чтобы поле, которое само по себе, заполняло 100% ширины, а не только 50%. Я считаю, что это требует полного переписывания CSS, а не просто настройки, но я не могу понять, как это может работать, но, зная, насколько умен CSS, я уверен, что это можно сделать.
Это необходимо сделать без фиксированных размеров, так как этот CSS будет влиять на несколько HTML-страниц. Если это невозможно сделать с помощью CSS, я уверен, что смогу что-то сделать с помощью JS, но я не хотел идти по этому пути и потенциально упустить простое решение. Всем спасибо!

Подробнее здесь: https://stackoverflow.com/questions/788 ... -is-filled