Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 5.00/9: Рейтинг темы: голосов - 9, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 28.06.2015
Сообщений: 29
1

Inline-block галерея или как убрать margin

13.09.2015, 23:36. Показов 1873. Ответов 24
Метки нет (Все метки)

Добрый вечер!
Необходима фотогалерея.
На просторах интернета нашел 2 популярных способа - float and inline-block.
Плюсы и минусы обеих понял, и выбрал для себя inline-block.
Вопрос: Необходим margin 0 30 10 0. Но блоки съезжают вниз. Как сделать горизонтальные отступы 30 и прижать 5 и 4 блоки к левой границе ul?
Inline-block галерея или как убрать margin


CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.playlist_gallery {
    width: 1170px;
    height: 566px;
    margin: 24px 0 0 0 ;
    display: block;
    background-color: green;
    font-size: 0;
}
ul.playlist_gallery li {
    display: inline-block;
    width: 270px;
    height: 270px;
    background-color: white;
    margin: 0 22px 10px 0;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
13.09.2015, 23:36
Ответы с готовыми решениями:

inline-block или нет?
Здравствуйте! Наткнулся на один интересный сайт http://learni.st (дизайн приглянулся), так вот...

Элемент float вне родительского или может с inline-block?
Собственно, то как должно быть. У меня div с телефоном вложен в контейнер div красной области (ниже...

Как избавиться от переноса inline-block
Здравствуйте. Не получается сделать блок как на картинке. Переносится не текст, а сама колонка. :(...

inline-block
Как разместить текст с правой стороны? <!DOCTYPE html> <html lang="en"> <head> <meta...

__________________
24
284 / 171 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
13.09.2015, 23:47 2
Добавлено через 56 секунд
Цитата Сообщение от Corjik Посмотреть сообщение
прижать 5 и 4 блоки к левой границе
убрать у 4 и 5 margin
0
0 / 0 / 0
Регистрация: 28.06.2015
Сообщений: 29
14.09.2015, 20:58  [ТС] 3
Sn1p3rOk, присвоил эти блокам класс и прописал margin 0.
Не помогло
0
284 / 171 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
14.09.2015, 21:17 4
Corjik, я не удивлен

Добавлено через 1 минуту
Corjik, нужно контейнер резиновый сделать, а у вас он фиксированный
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,516
Записей в блоге: 10
14.09.2015, 21:37 5
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
Corjik, нужно контейнер резиновый сделать, а у вас он фиксированный
А какая разница?
Есть много вариантов исправить данный баг даже при фиксированной ширине... Допустим правильно высчитать ширину родительского блока с учётом дочерних элементов и отступов, чтобы с правой стороны не оставалось пространства... Изменить размер контейнеров или внешних отступов... Не задавать ширины родительского блока с использованием свойства display:inline-block...
0
284 / 171 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
14.09.2015, 22:00 6
Цитата Сообщение от Fedor92 Посмотреть сообщение
Допустим правильно высчитать ширину родительского блока с учётом дочерних элементов и отступов
о господи неужели таким ещё занимаются ...

Добавлено через 2 минуты
Fedor92, я подсказал наиболее правильный вариант в данной случае, а статически задавать ширину как на мой взгляд не есть корректно...

Добавлено через 4 минуты
Corjik, если вам нужна ширина не менее 1100px то задайте min-width...
Либо вы можете послушать Fedor92 и вспомнить свои знания в начальной математике (шутка конечно) и посчитать ширину inline-block элементов. Выбор оставлю за вами.
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,516
Записей в блоге: 10
14.09.2015, 22:06 7
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
о господи неужели таким ещё занимаются ...
Открою секрет для тех людей кто верстает макеты один в один - это основа основ, как под фиксу, так и под резину, про адаптив и эластичную вообще говорить не буду...
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
Fedor92, я подсказал наиболее правильный вариант в данной случае, а статически задавать ширину как на мой взгляд не есть корректно...
С чего Вы взяли, что он единственно правильный? Если макет больше 980px, а он скорее всего больше - всё творение превратится в один столбец и налезет на контент рядом при уменьшении окна - либо сместит его, что в свою очередь необходимо предусмотреть!
0
284 / 171 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
14.09.2015, 22:07 8
Цитата Сообщение от Fedor92 Посмотреть сообщение
всё творение превратится в один столбец и налезет на контент рядом
про max-width что-то слышали ?
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,516
Записей в блоге: 10
14.09.2015, 22:11 9
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
про max-width что-то слышали ?
max-width - это костыль...
0
284 / 171 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
14.09.2015, 23:09 10
Fedor92, спорить можно долго моё дело предложить ... пусть создатель выбрить то, что считает правильным
0
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
14.09.2015, 23:38 11
Цитата Сообщение от Fedor92 Посмотреть сообщение
max-width - это костыль...
Ну что за бред! Foundation zurb по вашей логике тоже костыльный?
0
0 / 0 / 0
Регистрация: 28.06.2015
Сообщений: 29
15.09.2015, 00:55  [ТС] 12
Проблему решил.
Всем спасибо за ответы.
P/S Холивар разводить не нужно. Что лучше, а что хуже каждый решает для себя.
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,516
Записей в блоге: 10
15.09.2015, 01:10 13
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
Fedor92, спорить можно долго моё дело предложить ... пусть создатель выбрить то, что считает правильным
Я и не пытался спорить просто задавал Вам вполне логичные вопросы без критики Ваших вариантов... Вы пытались объяснить суть предложенного решения... Это нормально для любой темы... Мы оба предложили свои варианты вот и всё...
Цитата Сообщение от vovandr Посмотреть сообщение
Ну что за бред! Foundation zurb по вашей логике тоже костыльный?
Перед тем, как что-то называть "бредом" нужно хотя бы аргументировать своё мнение... Да по мне, использование max-width в вёрстке под desktop - это моветон... Если Вы просто хотите обратить на себя внимание - это далеко не лучший способ...
Цитата Сообщение от Corjik Посмотреть сообщение
Холивар разводить не нужно. Что лучше, а что хуже каждый решает для себя.
Это не холивар, а живое обсуждение вариантов реализации - их плюсы и минусы... Так что всё норм...
0
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
15.09.2015, 08:03 14
Цитата Сообщение от Fedor92 Посмотреть сообщение
Перед тем, как что-то называть "бредом" нужно хотя бы аргументировать своё мнение... Да по мне, использование max-width в вёрстке под desktop - это моветон... Если Вы просто хотите обратить на себя внимание - это далеко не лучший способ...
Перед тем как говорить, что свойство является костылем надо аргументировать это. А просто так говорить что это костыль - пустословие. Я вам привел конкретный пример крупного и известного фреймворка, лейаут которого полностью построен на этом свойстве.
Цитата Сообщение от Fedor92 Посмотреть сообщение
Если Вы просто хотите обратить на себя внимание - это далеко не лучший способ...
Вы это серьёзно?
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,516
Записей в блоге: 10
15.09.2015, 10:37 15
Цитата Сообщение от vovandr Посмотреть сообщение
Перед тем как говорить, что свойство является костылем надо аргументировать это. А просто так говорить что это костыль - пустословие. Я вам привел конкретный пример крупного и известного фреймворка, лейаут которого полностью построен на этом свойстве.
А чего тут аргументировать? Неужели не понятно? При таких широких возможностях вёрстки какие есть сейчас использовать такой костыль, как max-width для десктопоной вёрстки - это бред, причём сумасшедшего! Машине у которой колёса круглой формы поставить квадратные и толкать, чтобы она ехала - это круто... Сразу 90-е вспоминаются... Есть гениальные фреймворки, которые работают с таблицами и у которых косяки с кодировкой при переносе на русские сервера, которые имеют широкое распространение среди разработчиков... И? Мне теперь визжать от радости? Мы живём в 21 веке и пользуемся html5 + css3 - хотя по ходу кто как и использовать до сих пор max-width для десктопа - это ли не бред? Ну а теперь хотелось бы услышать Ваше обоснование - непустословный Вы наш...
Цитата Сообщение от vovandr Посмотреть сообщение
Вы это серьёзно?
Я что где-то смайлик поставил?
0
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
15.09.2015, 11:06 16
Ваша аргументация по max-width:
При таких широких возможностях вёрстки какие есть сейчас использовать такой костыль, как max-width для десктопоной вёрстки - это бред, причём сумасшедшего!
То есть аргументов у вас нет! Это я понял. То есть ляпнули что-то, а что не понятно. На будущее перед тем как что-то писать на форумах и советовать начинающим, подумайте сначала, а потом пишите. Хотя судя по всему опыта у вас тоже немного.
Что касается max-width. Всё построение макета при медиа запросах условно можно разбить на 2 типа. Первый - построение через width c заранее известными брейкпоинтами (тот же bootstrap), где при достижении нужной точки происходит уменьшение контейнера рывком. Второй (я его всегда использую) - отзывчивая верстка с установкой max-width контейнеру, в котором располагаются плавающие (иногда inline-block). При этом верстка подстраивается под любые разрешения, но и реализация сложнее (этот подход используют foundation).
Цитата Сообщение от Fedor92 Посмотреть сообщение
Машине у которой колёса круглой формы поставить квадратные и толкать, чтобы она ехала - это круто... Сразу 90-е вспоминаются...
Цитата Сообщение от Fedor92 Посмотреть сообщение
Мне теперь визжать от радости? Мы живём в 21 веке и пользуемся html5 + css3 - хотя по ходу кто как и использовать до сих пор max-width для десктопа - это ли не бред?
Я не знаю, что вы там курите, но на всякий случай скажите что, я иногда хочу так же расслабиться

Добавлено через 2 минуты
Удачи в вашей вёрстке.
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,516
Записей в блоге: 10
15.09.2015, 11:19 17
vovandr, ахах - я смотрю Вы конфликтный...
Цитата Сообщение от vovandr Посмотреть сообщение
Всё построение макета при медиа запросах условно можно разбить на 2 типа
Где Вы увидели слово медиа-запрос? Я же говорю влезли, а куда так и не поняли... Где в теме упоминалось использование медиа-запросов? Речь об использовании max-width без запросов... Так что сами подумайте кому из нас расслабиться нужно... Удачи в вёрстке...
0
284 / 171 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
16.09.2015, 00:45 18
Fedor92, извините, влезу в ваш диалог ... Вы утверждаете, что max-width это костыль только вне медиа-запросов. Тогда аргументируйте, пожалуйста, почему в медиа-запросах max-width не костыль ?
Цитата Сообщение от Fedor92 Посмотреть сообщение
При таких широких возможностях вёрстки какие есть сейчас использовать такой костыль, как max-width для десктопоной вёрстки - это бред, причём сумасшедшего!
Мне тоже не совсем понятно, что именно можно было изъять из цитаты выше как аргументированный ответ. Ваше утверждение по поводу костыля, есть какая-нибудь статья по этому поводу можно получить ссылку или сноску из книги чтобы можно было ознакомится ? Или этот вывод сделал из личного опыта и т.д. ?
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,516
Записей в блоге: 10
16.09.2015, 01:05 19
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
Вы утверждаете, что max-width это костыль только вне медиа-запросов.
Абсолютно верно... Max-width стоит использовать тогда, когда с помощью стандартных средств вёрстки Вы не сможете решить поставленную задачу...
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
Тогда аргументируйте, пожалуйста, почему в медиа-запросах max-width не костыль ?
В медиа-запросах max-width жизненно необходим для адаптации сайта под различные разрешения дисплеев большого количества гаджетов... Соответственно необходимо унифицировать размер блоков для каждого разрешения... Когда Вы верстаете макет под ПК - максимальную ширину блока можно предопределить, но явно не задавать(100% ширины окна броузера)... Адаптивную вёрстку с обычной путать не надо... Ещё раз повторюсь крайней необходимости в использовании max-width в данной теме нет, тогда зачем усложнять?
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
Или этот вывод сделал из личного опыта и т.д. ?
Угадали... Со временем поймёте суть сказанного... Может быть...
0
284 / 171 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
16.09.2015, 09:11 20
Fedor92, можно я задам такой "детский" вопрос, возможно даже немножко глупый, что случится если я в данном макет задам max-width ?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.09.2015, 09:11

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

inline block ?
Доброго времени суток!Очень нужна ваша помощь.Это моё первое задание по верстке,никак не разберусь...

Централизация inline-block
Не могу поставить текст по центру так, чтобы это волна (border-images) растягивалась по тексту, а...

float and inline-block
Здравствуйте, у меня сложилась такая проблема, надо срочно решить. У меня на странице должны идти...

inline-block и IE6
В IE6 inline-block не сжимается по контенту! Хотя говорят, что он им поддерживается... Как я понял,...

Не работает inline-block
Нужно чтоб превью видео стояли в ряд, но не в какую не становятся Скриншот сайта и кода вложены

Проблемы с inline-block
Всем привет! Есть одна известная проблема... Элементы со стилем inline-block имеют слева и...


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

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

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