Выровнить элементы по горизонтали как в таблице

12
F
На сайте с 06.02.2012
Offline
138
848

В связи с требованиями Гугла по адатпации сайта для мобильных браузеров, возникла необходимость отказаться от таблиц. Нужно чтоб элементы при уменьшении броузера уходили один под другой.

Но выровнять три элемента, например три картинки, на равном расстоянии друг от друга, да чтоб это расстояние сжималось до нуля, как в таблице... не получается.

Если во внешнем диве указать text-align:center, то картинки все стремятся в центр и прижимаются в нём друг к дружке в большом окне. А если указать отступы, даже в процентах, то они мешает картинками прижиматься при уменьшении окна.

Подскажите, плз, как задать плавающий отступ, как в таблицах?

F
На сайте с 16.11.2012
Offline
56
#1

Можно попробовать задать для элемента width и margin: ?px auto

F
На сайте с 06.02.2012
Offline
138
#2

Создал даже для картинок три блока <div style="display:inline; width: 33%; text-align:center; "> Для каждой. Картинкам указал margin: auto - ничего не помогает. Жмутся все к центру всё равно.

Замкнутый круг...

F
На сайте с 16.11.2012
Offline
56
#3

Так надо?

http://myt.myjino.ru/4.html

F
На сайте с 06.02.2012
Offline
138
#4

Да. Оно самое.

Только не понял... Блоки 999 паддингом что ли центруют внутренние блоки?

F
На сайте с 16.11.2012
Offline
56
#5

Не, паддинг - лишнее (наспех писАл), там маргин внутренних срабатывает.

Но, вообще, ИМХО, это кривовато для адаптива. Правильнее через media реализовывать. Так, например http://myt.myjino.ru/5.html

W
На сайте с 18.04.2015
Offline
13
#6

Вчера этим парился допиваливая главную страницу в опенкарте бутстрап шаблон. . мне хватило Inlineblock, float: right и всё

F
На сайте с 06.02.2012
Offline
138
#7

media тоже применяю. Гугл засыпал сообщениями. Вот и выкручиваюсь...

Тут похоже не годится он.

В хедере три картинки сверху общей длиной около 900 пх. А граница медиа больше 800 уже много. Либо две границы медиа делать, либо по вашему примеру.

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

---------- Добавлено 19.04.2015 в 22:21 ----------

fmex, сделаю по вашему примеру.

Спасибо!

D.iK.iJ
На сайте с 26.05.2013
Offline
239
#8

Эх, уже дали решение.

А я уж думал написать, что для картинок и обычный старый добрый <center> подойдет :)

---------- Добавлено 20.04.2015 в 01:10 ----------

fordzon, гляньте, если не видели: /ru/forum/873867

Там исправленный вариант сообщении в 3. Снимет много проблем с картинками.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
F
На сайте с 16.11.2012
Offline
56
#9

На <center> в html5 валидатор ругается

D.iK.iJ
На сайте с 26.05.2013
Offline
239
#10
fmex:
На <center> в html5 валидатор ругается

Знаю. Но я на валидатор с 2006 клал :) как сайты начал делать. Традиция-с.

Еще на сайте htmlbook видел примеров 5 выравнивания по центру, но уже не помню - где.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий