Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как расположить таблицу картинок вровень с текстом (:last-from-the-right)? / 23 сообщений из 23, страница 1 из 1
09.01.2013, 18:48
    #38103960
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
Как видно на картинке - идет блок текста и за ним таблица картинок. В строчке таблицы должно быть 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
| Ответить | Цитировать | Написать  
09.01.2013, 18:52
    #38103961
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
Не дописал - про лишний отступ снизу - их тоже быть не должно (визуально снизу видно серую полосу после картинок, которая в два раза толше чем нужно - 10пх маржин на картинках + 10 паддинг на лаяуте, а должно быть 0пх маржин на картинках + 10 паддинг лаяута).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 18:56
    #38103964
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
а если объединить их в контейнеры по 4 и применить justify ?
http://jsfiddle.net/thirtydot/EDp8R/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 19:18
    #38103993
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
Так?

Код: 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
| Ответить | Цитировать | Написать  
09.01.2013, 19:18
    #38103994
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
А зачем объединять?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 19:21
    #38103996
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
Правда последние три тоже джастифаются. И если их будет два, то прилипнут к краям. Как вариант можно добивать пустыми дивами.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 19:24
    #38104000
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
Ага, я придумал, гляньте http://tinkerbin.com/daf6RV6P :)

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

Код: 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
| Ответить | Цитировать | Написать  
09.01.2013, 19:49
    #38104029
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
Для поддержки IE, чтобы хоть как-то работало, для таких случаев можно сделать скрипт который выполнится после загрузки страницы и жаваскриптом все поправит. И сделать чтобы он выполнялся раз 3-5 в секунду, чтобы в случае динамических обновлений все правилось. Хе-хе, у кого старый комп и ие6 - будет сюрприз :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 19:51
    #38104030
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
private сделать хороший резиновый дизайн очень сложноЭто проблема дизайнера, а для хорошего дизайнера даже не проблема, а задача. В резиновой же верстке проблем не вижу.

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

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

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

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

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

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

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

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

И, там используется inline-block и text-align:justify - я не уверен что верстка сохранится, если вместо картинок там будет что-то посложней - с дивами.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.01.2013, 00:03
    #38107242
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
Я бы предпочел чистую верстку + набор фиксированных размеров под разные девайсы, чем резиновую и хак с пустыми экементами.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.01.2013, 10:00
    #38107376
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить таблицу картинок вровень с текстом (:last-from-the-right)?
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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как расположить таблицу картинок вровень с текстом (:last-from-the-right)? / 23 сообщений из 23, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 487ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448869]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 164ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 70ms
get tp. blocked users:
 2ms
others: 208ms
total:  487ms
x
x
Закрыть


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