powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
23 сообщений из 23, страница 1 из 1
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38103960
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Как видно на картинке - идет блок текста и за ним таблица картинок. В строчке таблицы должно быть 4 картинки, и левая граница первой картинки должна идти вровень с текстом, и правая последней - также вровень с текстом.

Но, так сделать не получается. Сейчас (неверно) сделано за счет `.image {margin-right: 10px; margin-bottom: 10px;}` - но, на последней картинке в строчке отступы все портят, как бы-их убрать там? (может чем-то похожим на :last ?)

Живой пример http://tinkerbin.com/IEo8tutu

Код

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
<div class='layout'>
  <div class='text'>
    Lorem ipsum dolor sit amet, in metus conubia, 
    facilisis pellentesque turpis dolor, nulla minima 
    in. Eu sed, lobortis mi molestie ac, neque vel sit 
    quis nostra, massa justo suspendisse suscipit 
    consectetuer porta.
  </div>
  <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='clearfix'></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.
.layout {
  padding: 10px;
  width: 430px;
  background-color: #eee;
}

.text {
  margin-bottom: 10px;
  background-color: #aaa;
}

.image {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #aaa;
  margin-right: 10px;
  margin-bottom: 10px;
}

.clearfix {
  clear: both;
}



http://petrush.in
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38103961
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Не дописал - про лишний отступ снизу - их тоже быть не должно (визуально снизу видно серую полосу после картинок, которая в два раза толше чем нужно - 10пх маржин на картинках + 10 паддинг на лаяуте, а должно быть 0пх маржин на картинках + 10 паддинг лаяута).
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38103964
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
а если объединить их в контейнеры по 4 и применить justify ?
http://jsfiddle.net/thirtydot/EDp8R/
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38103993
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Так?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<images>
  <line>
    <image></image> <image></image> <image></image> <image></image>
  </line>
  <line>
    <image></image> <image></image> <image></image> <image></image>
  </line>
</images>



Да, но это усложнит верстку, и когда например динамически добавляться или удаляться картинки будут (поменять что-то без обновления страницы) - то просто так картинки уже в список не добавишь/удалишь - нужно будет считать как их там перераспределять между линиями.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38103994
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38103996
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Правда последние три тоже джастифаются. И если их будет два, то прилипнут к краям. Как вариант можно добивать пустыми дивами.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104000
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ага, я придумал, гляньте http://tinkerbin.com/daf6RV6P :)

Надо было добавить вот что `.image:nth-child(4n){margin-right: 0; margin-bottom: 0;}
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104003
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Только заметил, вторая проблема не решена, снизу всеравно двойной отступ.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104009
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
privateТолько заметил, вторая проблема не решена, снизу всеравно двойной отступ.А теперь попробуй увеличить размер лейаута :)
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104022
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Вторая проблема тоже решается, нужно было добавить:

Код: css
1.
2.
3.
4.
5.
6.
7.
.image:nth-child(4n){
  margin-right: 0;
  margin-bottom: 0;
}
.image:nth-last-child(-n + 5){
  margin-bottom: 0;
}



правильный пример http://tinkerbin.com/8PBYdpG6

Но, это не работает в ИЕ 8 точно, в 9 и выше вроде-как работает, но - по умолчанию не работает (пишут нужно убирать галочку совместимости которая по умолчанию включена).

> А теперь попробуй увеличить размер лейаута :)

Ага, но с другой стороны - сделать хороший резиновый дизайн очень сложно. Я пока больше склоняюсь - сделать несколько жестких вариантов - комп / планшет / телефон и переключать их.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104029
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Для поддержки IE, чтобы хоть как-то работало, для таких случаев можно сделать скрипт который выполнится после загрузки страницы и жаваскриптом все поправит. И сделать чтобы он выполнялся раз 3-5 в секунду, чтобы в случае динамических обновлений все правилось. Хе-хе, у кого старый комп и ие6 - будет сюрприз :)
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104030
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
private сделать хороший резиновый дизайн очень сложноЭто проблема дизайнера, а для хорошего дизайнера даже не проблема, а задача. В резиновой же верстке проблем не вижу.

Если же ты и дизайнер и верстальщик, тогда да, проблема :)
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104092
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Вот хороший пример для резиновой верстки, как его сделать (без усложнения хтмл) ?
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104160
няка
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
private,

а чем вас ответ Antonariy не устраивает?
он весьма резиновый
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104374
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
При растяжении 4-ёх элементов под текст, растягивается отступ между ними и тут вопрос - как должны располагаться элементы ниже, если их к примеру два в строке? Прижиматься по краям к родителю как в примере выше? Или поставить между ними "отступ по умолчанию", который несовпадёт с отступом у растянутых 4-ёх и получим ассиметрию?

И у резиновой вёрстки нет никаких 4, 5 и т.д. элементов, количество регулируется лишь размерами родительского блока, сколько влезло, столько влезло.

Насчёт сложности резины - это наверное самое сложное в вёрстке.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104674
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
st_stНасчёт сложности резины - это наверное самое сложное в вёрстке. fluid 960 спасет отцов не только демократии, но и монархии и коммунизма.

По-моему самое сложное это придумать дизайн, который в резиновом виде не скатывался бы в УГ ни при каких обстоятельствах.
Впрочем, я всегда верстаю резину. Кроме печатных форм, их — под размер бумаги. Лейаут-то можно зафиксировать, а если у заказчика семь пятниц на неделе и каждый день новые размеры, то менять приходится лишь размеры лейаута, а контенту по барабану, какого тот размера. Удобная привычка.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104858
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Antonariyst_stНасчёт сложности резины - это наверное самое сложное в вёрстке. fluid 960 спасет отцов не только демократии, но и монархии и коммунизма.

По-моему самое сложное это придумать дизайн, который в резиновом виде не скатывался бы в УГ ни при каких обстоятельствах.
Впрочем, я всегда верстаю резину. Кроме печатных форм, их — под размер бумаги. Лейаут-то можно зафиксировать, а если у заказчика семь пятниц на неделе и каждый день новые размеры, то менять приходится лишь размеры лейаута, а контенту по барабану, какого тот размера. Удобная привычка.

Дизайн придумать сложно, с этим спору нет. Но и сверстать его не легче. Отсутствие ответа на данный топик (и мой предыдущий в том числе) лишь подтверждает, что либо народ на данном форуме мало сталкивался с резиной, либо дело это не из лёгких.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38104908
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
st_stОтсутствие ответа на данный топикЧем мой вариант не резиновый? Заменить у лейаута пиксели на проценты и вуаля.
st_stи мой предыдущий в том числеНе видел, посмотрю.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38105106
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Antonariyst_stОтсутствие ответа на данный топикЧем мой вариант не резиновый? Заменить у лейаута пиксели на проценты и вуаля.

Заменить на проценты и в конец пустых блоков накидать, чтоб по краям не жалось, тогда становится похожим на правду.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38105314
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Автору было нужно, чтобы жалось по краям, и для этого в конце как раз и есть пустой блок шириной 100%.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38107240
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
> Автору было нужно, чтобы жалось по краям, и для этого в конце как раз и есть пустой блок шириной 100%
Имелось ввиду что если блоков 4 - тогда по краям, если меньше - то нет.
Чтобы так было - прийдется добавлять в список невидимые пустые элементы - это усложнение верстки, и при динамическом изменении списка - нужно будет не только добавлять элементы, но и высчитывать и добавлять пустые елементы в конец. Это не то чтобы совсем неприемлемо, но неудобно.

И, там используется inline-block и text-align:justify - я не уверен что верстка сохранится, если вместо картинок там будет что-то посложней - с дивами.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38107242
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Я бы предпочел чистую верстку + набор фиксированных размеров под разные девайсы, чем резиновую и хак с пустыми экементами.
...
Рейтинг: 0 / 0
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
    #38107376
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
privateЧтобы так было - прийдется добавлять в список невидимые пустые элементы - это усложнение верстки, и при динамическом изменении списка - нужно будет не только добавлять элементы, но и высчитывать и добавлять пустые елементы в конец. Это не то чтобы совсем неприемлемо, но неудобно.

А чем они мешают? Накидал и забыл. Добавляют отступ снизу? Если justify, то можно родителю font-size:0 поставить, в некоторых браузерах отступ исчезнет, в других минимизируется.

У меня вообще center (на js нормально работает), а на css такая же проблема с отступами (font-size:0 использовать нельзя, ибо перестаёт работать letter-spacing в вебките и IE), плюс пустые элементы с нулевой высотой нарушают центровку, то есть нужно задавать им хотя бы какую-нибудь минимальную высоту.

privateЯ бы предпочел чистую верстку + набор фиксированных размеров под разные девайсы, чем резиновую и хак с пустыми экементами.

Все девайсы разные по размерам, под все всё равно не подберёшь. Была идея делать резину под интервалы ширины, к примеру 300px - 600px, 600 - 1200, 1200 - 2000, внутри интервала сайт резиновый от минимума до максимума и конкретный шаблон выдавать с сервера из соображений - нафига пользователю айфона грузить 100 новостей, 200 товаров, колонку "как я провёл лето" и т.д., которые всё равно скрываются через медиа кверис. Но идея переросла в "сделать полную резину", минипулируя элементами через медиа кверис и подгружая с сервера данные в зависимости от разрешения экрана (не ширины браузера, так как он может быть просто уменьшен вручную).

Пример немного резинового сайта , так сказать самое начало.
...
Рейтинг: 0 / 0
23 сообщений из 23, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]