Плавная ширина с равномерно расположенными DIV + последняя строка с выравниванием по левому краю
У меня есть блоки фиксированной ширины в гибком макете и выравнивание текста: выровняйте их с помощью этого опубликованного решения:
Плавная ширина с одинаково расположенными DIV
Но поскольку у меня есть еще пара строк в отзывчивая верстка.
Это, конечно, происходит:
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------
| | | | | |
| | | | | |
------ ------ ------
Но мне нравится, когда это выглядит так:
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------
| | | | | |
| | | | | |
------ ------ ------
Конечно, оправдывает, работает ли это, но есть ли решение, не используя для этого javascript?
Я подумал, что текст -align-last: left может работать, но это не так, и это еще не официальная программа.
Идея возможного решения:
Я придумал возможное решение для javascript, но для этого мне нужна ваша помощь.
Вот моя идея возможного решения:
Чтобы последняя строка была выровнена по левому краю, нам нужно было бы заполнить эти недостающие места невидимыми полями. Мы могли бы легко сделать это вручную, но количество div создается пользователем и всегда разное.
Итак, weed нужно знать количество отсутствующих ящиков и добавить их к тем, которые у нас уже есть, чтобы заставить его работать:
Итак, вот моя (инфантильная) идея выбора:
1. Count all divs
2. Divide them with 4 (cause we have 4 in a row)
3. If the SolutionA has no decimal, nothing will happen cause all is good
4. If the SolutionA has a decimal, remove it
5. SolutionA + 1 = SolutionB
6. SolutionB x 4 (cause we have 4 each in a row) = SolutionC
7. SolutionC - SolutionA = Number of divs we need to add.
Я не знаю если есть способ узнать, сколько элементов уже находится в строке, чтобы передать это в javascript. Это было бы хорошо, потому что формула будет работать для адаптивного макета без корректировки номера строки каждый раз, когда они меняются вместе с шириной браузера.
Это хорошая идея?
Я надеюсь, что некоторые захотят это сделать.
Вот скрипка для работы: http://jsfiddle.net/L2mPf/
Спасибо.
См. Мой ответ дальше.