Здравствуйте, у меня возник вопрос по поводу поведения элементов на странице, с чередованием свойства 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;
}
<div class="container" style="background-color:black;">
<div class="content" style="background-color:green;"></div>
<div class="content" style="background-color:#4cff00;"></div>
<div class="content" style="background-color:#194e00;"></div>
</div>
<div class="container" style="background-color:yellow;">
<div class="content" style="background-color:green;"></div>
<div class="content" style="background-color:#4cff00; "></div>
<div class="content" style="background-color:#194e00; display:block;"></div>
</div>
<div class="container" style="background-color:blue;">
<div class="content" style="background-color:green; display:block;"></div>
<div class="content" style="background-color:#4cff00;"></div>
<div class="content" style="background-color:#194e00;"></div>
</div>