Ширина жидкости с одинаково расположенными DIVs + последний ряд выровнен по левому краю - PullRequest
Новая
       15

Ширина жидкости с одинаково расположенными DIVs + последний ряд выровнен по левому краю

5 голосов
/ 03 февраля 2012

У меня есть блоки фиксированной ширины в разметке и выравнивании текста: обоснуйте их с этим опубликованным решением:

Ширина жидкости с одинаково расположенными DIVs

Но так как у меня есть еще несколько строк в адаптивном макете.

Это конечно бывает: 

------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------          ------        ------    
|    |          |    |        |    |   
|    |          |    |        |    | 
------          ------        ------

Но мне нравится, когда это так: 

------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------   
|    |    |    |    |    |  
|    |    |    |    |    |
------    ------    ------

Конечно, оправдывает ли это свою работу, но есть ли решение этой проблемы без использования javascript для этого?

Я думал, что text-align-last: left может работать, но это не так, и пока это не официально.

Идея возможного решения:

Я придумала возможное решение для JavaScript, но для этого мне нужна ваша помощь.

Вот моя идея возможного решения:

Чтобы выровнять последнюю строку по левому краю, нам фактически нужно заполнить эти пропущенные места невидимыми прямоугольниками. Мы могли бы легко сделать это вручную, но число элементов div генерируется пользователем и всегда различно.

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

Итак, вот моя (инфантильная) идея написания текста: 

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/

Спасибо.

См. Мой ответ за пределами.

Ответы [ 3 ]

7 голосов
/ 06 февраля 2012

Хорошо, вот чертовски простое решение с помощью css:

Просто добавьте столько делений, сколько будет в строке (в данном случае 4), и присвойте им высоту 1px.

Ничего не видно, и все работает как шарм без JavaScript.

Вот новая скрипка: http://jsfiddle.net/L2mPf/1/

Спасибо @GGG за то, что я снова обратил внимание на css и это решение.

0 голосов
/ 03 февраля 2012

в вашем css установите минимальную высоту для ваших ящиков. 

.box-class {
    min-height: 100px;
    height: auto !important;
    height: 100px;
}

100px для примера и включает минимальное исправление высоты для IE6

вы также можете захотеть переместить влево (и отобразить блок) ваши поля, а затем clearfix родительский контейнер, чтобы он оставался открытым, если проблема с выравниванием не устранена. (пример clearfix css в ссылке)

0 голосов
/ 03 февраля 2012

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

...