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

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

30.06.2014, 16:24. Просмотров 2186. Ответов 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
vovandr
631 / 519 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
14.07.2014, 13:23 21
я плохо могу себе представить иной вариант
сайт с нефиксированной шириной
0
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
14.07.2014, 13:46 22
и? в таком случае резонно менять ширину и высоту самих блоков, а не их количество в строке. если мой монитор будет большого размера, то вглядываться в 100px на 100px, мне будет не комфортно, но зато их будет 20 штук в строку, из за чего сайт будет смотреться уродливо
0
vovandr
631 / 519 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
14.07.2014, 13:55 23
tasadarMiha вступать с вами в спор смысла не вижу, ибо потребности могут быть разные и все случаи предусмотреть нельзя. Оптимальный вариант у тс на мой взляд уже есть (через text-align-last). Я бы сделал через flexbox (с фолбэком под 8-9 ie). Предложенное вами решение не гибкое, из-за привязки к пятому элементу (можно в будущем самому выстрелить себе в ногу)
1
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
14.07.2014, 14:03 24
text-align-last:justify ? ну, оно там не работает. я не стремлюсь защитить/навязать свой вариант, вообще не считаю что смог добиться того, чего хотел, а именно последние 2 элемента стоят по центру, но не меняют расстояния между собой. Но сейчас я вижу весьма нестабильную верстку, очень часто автор с ней будет попадать в неприятности. Это я про то, что если делаете резиновую верстку, то делайте все значения относительными единицами, в противном случае - делайте все жестко
1
vovandr
631 / 519 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
14.07.2014, 14:11 25
Не всегда надо делать эти значения относительными В большинстве случаев да, поставил в процентах и все довольны. Но вот иногда очень хорошо подходят и варианты с фикс блоками (возможно даже на определенных брейкпоинтах).
0
BigBob
12 / 12 / 5
Регистрация: 30.07.2013
Сообщений: 74
14.07.2014, 14:59  [ТС] 26
Всем спасибо, перенесу тему в раздел "jquery". Про flexbox не слышал раньше, интересная тема - поизучаю! спс!
0
vovandr
631 / 519 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
14.07.2014, 23:07 27
Цитата Сообщение от BigBob Посмотреть сообщение
Всем спасибо, перенесу тему в раздел "jquery"
Да в принципе можно и не переводить
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
  .images {
    width: 100%;
    background-color: #ff0000;
    overflow: hidden;
}
 
.image {
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px 0 5px 20px; /* right margin == 0!!! */
    background-color: #00ff00;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="imagesWrap" 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>
Javascript
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
(function(){
 
      var blocks = document.querySelectorAll('.image'),
          blockMargin = parseInt(getComputedStyle(blocks[1]).marginLeft),
          blocksWidth = blocks[1].offsetWidth + blockMargin,
          blockWrap = document.getElementById('imagesWrap'),
          len = blocks.length;
 
       function justifyBlocks() {
          var wrapWidth = blockWrap.offsetWidth,
              rowLen =  Math.floor(wrapWidth/blocksWidth),
              availableSpace, blockSpace;
          if(rowLen>=len){
              rowLen = len;
          }
          availableSpace = wrapWidth - blocksWidth*rowLen,
          blockSpace = availableSpace/(rowLen-1);
 
          [].slice.call(blocks).forEach(function(el, i){
            el.style.marginLeft = i % rowLen === 0 ? 0 + 'px' : (blockMargin + blockMargin/(rowLen-1) + blockSpace)*100/wrapWidth + '%';
          });
       }
 
      window.onload = justifyBlocks;
      window.onresize = justifyBlocks;
 
 
  })();
Добавлено через 42 минуты

Добавлено через 5 часов 50 минут
Поправил с учетом отступов (правый марджин 0!)
1
14.07.2014, 23:07
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.07.2014, 23:07

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

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

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


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

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

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