块元素无响应

Question

我有五个连续的方形按钮，我将它们显示为一把锁。但是，在移动设备上查看时 phone 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

从您的 .menu class 中删除 height 属性（或者至少将其更改为 min-height）将使您的 parent 元素的高度扩展以适应其内容，从而将其后的内容推到页面下方。

请参阅下面的示例以了解说明。

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;
}

<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>

块元素无响应

Block Element Not Responsive

css

mobile