Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.83/12: Рейтинг темы: голосов - 12, средняя оценка - 4.83
BigBob
12 / 12 / 5
Регистрация: 30.07.2013
Сообщений: 74
#1

Последняя строка при выравнивании по ширине родителя

30.06.2014, 16:24. Просмотров 2101. Ответов 26
Метки нет (Все метки)

Добрый день!!!

http://jsfiddle.net/KPDZ5/12/

Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="images">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
</div>


Кликните здесь для просмотра всего текста
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.images {
    text-align: justify;
    width: 100%;
    background-color: #ff0000;
    position: relative;
    text-align-last: justify;
}
 
.image {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #00ff00;
}
 
.images:after {
  content: "";
  display: inline-block;
  width: 100%;
}


Как сделать, чтобы последняя строка выравнивалась по левому краю, при этом блоки последней строки были под блоками верхней строки?
Подскажите, знает кто-нибудь решение подобной проблемы?

скрин ниже

Заранее спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
30.06.2014, 16:24
Ответы с готовыми решениями:

Масштабирование элемента (zoom) по ширине родителя
Добрый день. Возникла проблемка с масштабированием элемента. Хочу применить к...

Растянуть inline-div по ширине родителя
Добрый вечер. Возникла проблемка с inline блоками. Есть код: &lt;html&gt; ...

Как сделать высоту равной ширине при ширине 100%?
как можно сделать элемент(например таблицу) квадратным, т.е. высота равна...

При наведении на ребёнка, теряется стиль у родителя
Здравствуйте. Есть боковое меню с выпадающим меню. Есть меню : &lt;li...

Перенос текста при ширине больше нужного
нужно сделать как на картинке, тоесть если текст длиннее чем картинка, то он...

26
BigBob
12 / 12 / 5
Регистрация: 30.07.2013
Сообщений: 74
30.06.2014, 16:27  [ТС] #2
Последняя строка при выравнивании по ширине родителя


на разных экранах по разному будет отображаться - прикладываю мой скрин
0
killlfun
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
30.06.2014, 17:06 #3
BigBob, я не совсем понял задание.
Нужно что бы в последней строке было как и в предыдущих, но без последнего блока?
0
aj17
280 / 271 / 153
Регистрация: 02.06.2014
Сообщений: 1,016
30.06.2014, 17:13 #4
text-align: justify;

Уберите
0
BigBob
12 / 12 / 5
Регистрация: 30.07.2013
Сообщений: 74
30.06.2014, 17:20  [ТС] #5
killlfun, нужно, чтобы в последней строке, не зависимо от количества блоков, хоть 2, 3, 4 и т.д. блоки были слево направо под блоками верхней строки, а после последнего блока - пустая строка.

Добавлено через 1 минуту
aj17,
Цитата Сообщение от aj17 Посмотреть сообщение
text-align: justify;
Уберите
так собственно ради этого и все проблемы - чтобы блоки выравнивались по ширине родителя.
0
killlfun
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
30.06.2014, 17:32 #6
в общем на сколько я понял

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="images">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image1" style="margin-left:0;"></div>
    <div class="image1"></div>
    <div class="image1"></div>
    <div class="image1"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.images {
    text-align: justify;
    width: 100%;
    background-color: #ff0000;
    position: relative;
    text-align-last: justify;
}
 
.image {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #00ff00;
}
 
.image1 {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #00ff00;
    float:left;
    margin-left:6.5px;
}
 
.images:after {
  content: "";
  display: inline-block;
  width: 100%;
}
ну margin-left придется точно подобрать
1
dimadyak
8 / 8 / 6
Регистрация: 08.04.2014
Сообщений: 54
30.06.2014, 17:38 #7
BigBob, попробуйте эту статью прочесть может поможет http://css-live.ru/articles/krasivoe...voj-setke.html
0
BigBob
12 / 12 / 5
Регистрация: 30.07.2013
Сообщений: 74
30.06.2014, 17:43  [ТС] #8
вариант норм, только в строке будет разное количество блоков, в зависимости от ширины экрана, извиняюсь, что забыл сразу сказать!

Добавлено через 2 минуты
dimadyak, спасибо!!! по этой статье и пришел к данной проблеме. Поначалу все было хорошо, пока блоков было четное количество и на всю ширину родителя, а как нечетное, или блоков не хватает, чтобы заполнить последнюю строку - получается не так, как задумано
0
aj17
280 / 271 / 153
Регистрация: 02.06.2014
Сообщений: 1,016
30.06.2014, 17:44 #9
Ничего не понял)
0
yan_azov
8 / 8 / 3
Регистрация: 13.10.2013
Сообщений: 27
30.06.2014, 18:05 #10
http://jsfiddle.net/KPDZ5/19/
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="images">
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
    <div class="image"><div></div></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.images {
    width: 100%;
    background-color: #ff0000;
    position: relative;
}
 
.image {
    display: block;
    min-width: 100px;
    max-width: 140px;
    width: 20%;
    height: 100px;
    float: left;
   
    border: 5px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.image div{
    display: block;
    background-color: #00ff00;
    width: 100%;
    height: 100%;
    
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.onresize = function() {
    var b_width;
    var unit_width;
    b_width = $(".images").width();
    unit_width = b_width/div(b_width, 100)+'px';  /*  вычисляем ширину блока    */
    unit_width = parseInt(unit_width);
    $('.image').css('width', unit_width);
}   
function div(val, by){
    return (val - val % by) / by;
}
window.onload = function() {
    window.onresize();  
    
}
вот. с учетом резиновой верстки.
1
monochromer
409 / 371 / 163
Регистрация: 03.01.2013
Сообщений: 966
30.06.2014, 18:23 #11
BigBob,
Трюк
CSS
1
2
3
4
5
.images:after {
  content: "";
  display: inline-block;
  width: 100%;
}
нужен, чтобы выровнять по ширине (justify) последнюю строку. Уберите этот псевдоэлемент и строку text-align-last: justify;
1
BigBob
12 / 12 / 5
Регистрация: 30.07.2013
Сообщений: 74
14.07.2014, 11:41  [ТС] #12

Не по теме:

Извиняюсь, что не заходил, мне почему-то оповещение об ответах на e-mail не приходили



monochromer, так если так сделать, то в последней строке выравнивание все равно не будет, как в строках выше.

Добавлено через 10 минут
yan_azov, я сделал немного по другому

Не по теме:

раньше Ваш код не видел, т.к. думал никто не ответил(((


http://diw-wedding.ru

Не по теме:

ссылку удалю, как решу проблему



Вы случайно не подскажете, сейчас у меня проблема - при первой загрузке сайта скрипт не срабатывает, F5 - тогда норм, если ctrl+F5 - снова не срабатывает. Я понимаю, что где-то что-то не успевает подгружаться, а что и где не пойму, т.к. второй раз в жизни использую jquery?
0
monochromer
409 / 371 / 163
Регистрация: 03.01.2013
Сообщений: 966
14.07.2014, 11:43 #13
Цитата Сообщение от BigBob Посмотреть сообщение
так если так сделать, то в последней строке выравнивание все равно не будет, как в строках выше.
Так Вам нужно, чтобы элементы последней строки выравнивались по ширине или нет?
Если выравнивание нужно оставьте все, как есть.
0
BigBob
12 / 12 / 5
Регистрация: 30.07.2013
Сообщений: 74
14.07.2014, 11:46  [ТС] #14
Цитата Сообщение от monochromer Посмотреть сообщение
Так Вам нужно, чтобы элементы последней строки выравнивались по ширине или нет?
Если выравнивание нужно оставьте все, как есть.
Мне нужно выравнивание по ширине, но в последней строке (если в ней будет меньше блоков, чем в строках выше), чтобы между блоками были такие же расстояния как и в строках выше.

Ссылка выше - посмотрите. На странице Love story - видно, только первый раз не будет видно - нажмите F5.
0
monochromer
409 / 371 / 163
Регистрация: 03.01.2013
Сообщений: 966
14.07.2014, 11:53 #15
Лучше уж тогда на float'ах делать.
1
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
14.07.2014, 13:01 #16
вот, без скриптов, единственно, этот метод хорошо подходит, только если вы знаете сколько именно блоков должно быть в каждой строке http://jsfiddle.net/KPDZ5/21/
0
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
14.07.2014, 13:07 #17
tasadarMiha тут вся фишка в том чтобы сделать последнюю строку с левым выравниванием, а в вашем примере такого не наблюдается. Ну и с количеством блоков тоже не комильфо) Скорее всего их разное количество может быть.
0
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
14.07.2014, 13:11 #18
хотя, мне вообще кажется, что этот вариант симпатичнее http://jsfiddle.net/KPDZ5/24/

Добавлено через 1 минуту
а, вся последняя строка должна равняться по левому краю? на картинке два блока по бокам, и два по центру. Думаю, автор не так выразился, ибо так вообще бы проблем не было
0
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
14.07.2014, 13:13 #19
Это конечно мое мнение, но я думаю без знания количества этих блоков задача не решается)))Последнюю строку никак не выровнять по левому краю) Ну а зная количество блоков сама задача тривиальная и ничего сожного в ней нет.
0
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
14.07.2014, 13:20 #20
вообще, всегда делается фиксированное значение блоков в строке. я плохо могу себе представить иной вариант
0
14.07.2014, 13:20
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.07.2014, 13:20

Положение блоков при разной ширине страницы
Подскажите пожалуйста, как сделать, чтобы блоки при изменении ширины окна...

При определенной ширине экрана поменять местами боки
Всем здравствуйте! Есть задача - при определенной ширине экрана поменять...

Равномерное распределение блоков по ширине при сжатом коде
Здравствуйте! распределяю равномерно по ширине блоки, задав родителю...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru