Страницы

Поиск по вопросам

среда, 13 марта 2019 г.

Как ведут себя inline-block элементы

Здравствуйте, у меня возник вопрос по поводу поведения элементов на странице, с чередованием свойства display:block;и display:inline-block;. Я создал 3 дива и в каждый поместил еще по 3 div, нужно сделать так, что бы было возможно распологать как угодно внутренние div, но что бы внешние div не меняли свою позицию. Собственно я думал, что в этом никаких проблем не будет, но почему-то при разных комбинациях этого самого display: внешние div блоки начали вмещаться по вертикали, почему это происходит, ведь если я правильно понимаю, display:inline-block должен везти себя просто как строка и не зависеть от того, что в нем находится, аналогично с просто display:block. Что я упускаю? Как же все таки ведут себя блоки, стилизованные таким образом?
.container { width: 200px; height: 200px; display: inline-block; } .content { width: 20%; height: 20%; display: inline-block; } body, div { margin: 0px; padding: 0px; }



Ответ

Чтобы исправить, задайте vertical-align для контейнеров, например, top
.container { width: 200px; height: 200px; display: inline-block; vertical-align: top; } .content { width: 20%; height: 20%; display: inline-block; } body, div { margin: 0px; padding: 0px; }


Комментариев нет:

Отправить комментарий