块元素不响应

Question

我连续五个方形按钮，我显示为一个锁。然而，当在移动电话上观看时，5个图标没有堆叠，它们聚集在一起并与它们下面的元素重叠。我认为添加clear元素会解决这个问题，但事实并非如此。有人能指出我正确的方向吗？

非常感谢，我非常感谢！

.menu {
    height: 100px;
    clear: both;
    width:100%;
    margin-bottom:40px;
    margin-top:35px;
}

.icons {
    height: 100px;
    width:100px;
    display: inline-block;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
    background-color:#ffffff;
}

Answer 1

从height课程中移除.menu媒体资源（或者至少将其更改为min-height）可以让您的父元素的高度扩展到适合它的内容，从而推动页面下面的内容。

请参阅下面的示例以获取说明。

＆＃13;

＆＃13;

div{
  background:green;
  margin:5px 0;
  padding:5px;
}
p{
  font-family:sans-serif;
  margin:0;
}
div p{
  background:red;
  min-height:40px;
}
div~div{
  height:20px;
}

＆＃13;

<div>
  <p>This paragraph's parent doesn't have set height and therefore will expand to fit the height of this paragraph</p>
</div>
<p>This is just a placeholder</p>
<div>
  <p>This paragraph's parent has a set height and therefore won't expand to fit the height of this paragraph</p>
</div>
<p>This is just a placeholder</p>

＆＃13;

＆＃13;

＆＃13;