Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 12, средняя оценка - 4.83
BigBob
12 / 12 / 2
Регистрация: 30.07.2013
Сообщений: 74
#1

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

30.06.2014, 16:24. Просмотров 1940. Ответов 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
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Последняя строка при выравнивании по ширине родителя (HTML, CSS):

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

Растянуть inline-div по ширине родителя - HTML, CSS
Добрый вечер. Возникла проблемка с inline блоками. Есть код: &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot;...

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

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

Перенос текста при ширине больше нужного - HTML, CSS
нужно сделать как на картинке, тоесть если текст длиннее чем картинка, то он переносится на новую строку. Вроде бы просто, а что-то ни как...

равномерное распределение блоков по ширине при сжатом коде - HTML, CSS
Здравствуйте! распределяю равномерно по ширине блоки, задав родителю text-align:justify, но при сжатом коде между элементами нет...

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

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

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

Добавлено через 1 минуту
aj17,
Цитата Сообщение от aj17 Посмотреть сообщение
text-align: justify;
Уберите
так собственно ради этого и все проблемы - чтобы блоки выравнивались по ширине родителя.
0
killlfun
102 / 102 / 36
Регистрация: 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 / 2
Регистрация: 30.07.2013
Сообщений: 74
30.06.2014, 17:43  [ТС] #8
вариант норм, только в строке будет разное количество блоков, в зависимости от ширины экрана, извиняюсь, что забыл сразу сказать!

Добавлено через 2 минуты
dimadyak, спасибо!!! по этой статье и пришел к данной проблеме. Поначалу все было хорошо, пока блоков было четное количество и на всю ширину родителя, а как нечетное, или блоков не хватает, чтобы заполнить последнюю строку - получается не так, как задумано
0
aj17
234 / 225 / 107
Регистрация: 02.06.2014
Сообщений: 853
30.06.2014, 17:44 #9
Ничего не понял)
0
yan_azov
8 / 8 / 2
Регистрация: 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
408 / 370 / 144
Регистрация: 03.01.2013
Сообщений: 963
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 / 2
Регистрация: 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
408 / 370 / 144
Регистрация: 03.01.2013
Сообщений: 963
14.07.2014, 11:43 #13
Цитата Сообщение от BigBob Посмотреть сообщение
так если так сделать, то в последней строке выравнивание все равно не будет, как в строках выше.
Так Вам нужно, чтобы элементы последней строки выравнивались по ширине или нет?
Если выравнивание нужно оставьте все, как есть.
0
BigBob
12 / 12 / 2
Регистрация: 30.07.2013
Сообщений: 74
14.07.2014, 11:46  [ТС] #14
Цитата Сообщение от monochromer Посмотреть сообщение
Так Вам нужно, чтобы элементы последней строки выравнивались по ширине или нет?
Если выравнивание нужно оставьте все, как есть.
Мне нужно выравнивание по ширине, но в последней строке (если в ней будет меньше блоков, чем в строках выше), чтобы между блоками были такие же расстояния как и в строках выше.

Ссылка выше - посмотрите. На странице Love story - видно, только первый раз не будет видно - нажмите F5.
0
monochromer
408 / 370 / 144
Регистрация: 03.01.2013
Сообщений: 963
14.07.2014, 11:53 #15
Лучше уж тогда на float'ах делать.
1
14.07.2014, 11:53
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.07.2014, 11:53
Привет! Вот еще темы с ответами:

При определенной ширине экрана поменять местами боки - HTML, CSS
Всем здравствуйте! Есть задача - при определенной ширине экрана поменять определенные блоки документа (.block1, .block2) местами. ...

Изменение расположения блока при ширине экрана меньше 500px - HTML, CSS
Есть код &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;w&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div...

Container-fluid не резинит по ширине браузера при 958px и меньше - HTML, CSS
container-fluid не резинит по ширине браузера при 958px и меньше. Как эту проблему решить?

Растягивание текста по ширине блока при изменении разрешения экрана - HTML, CSS
Добрый день! Помогите пожалуйста! Делаю сайт на Joomla + Bootstrap (сайт резиновый) при изменении разрешения экрана на 1920х1200 весь текст...


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

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

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