Здравствуйте, у меня возник вопрос по поводу поведения элементов на странице, с чередованием свойства 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;
}
Комментариев нет:
Отправить комментарий