Question

有些文字内容较小，有些较大，如何使它们看起来相同并应用相同的边距

另外，当我减小浏览器尺寸时说移动尺寸我看到第二和第三div之间的差距这是指向codepen http://codepen.io/rahulv/pen/PGLBdY

的链接

的CSS：

.  div.outer_certi{
margin-top:2%;
height: 100%;
  }
  .certification p{
 padding:1% 1% 1% 1%;
 }
 .certification img{
padding:1% 1% 1% 1%;
float: left;
max-width:200px;
height:auto;
 }
 .certification{
 border:1px solid #e6e6e6;
 background-color:#faf9f;
overflow:hidden;
}
.certification:hover{
-moz-box-shadow: 0 0 10px #ccc;
      -webkit-box-shadow: 0 0 10px #ccc;
      box-shadow: 0 0 10px black;
}

Answer 1

在.certification课程中添加overflow:hidden;

差距来自您的div.outer_certi选择器。从该规则中删除保证金。

如果您只想为第一个元素添加边距，请执行此操作

div.outer_certi:first-of-type {
margin-top:2%;
}

如果您希望所有div都具有相同的高度，您可以尝试：

.certification{
 min-height:150px;/* set this to you choice*/
}

Answer 2

overflow属性指定内容溢出元素框时会发生什么。默认情况下，此属性设置为visible。溢出不会被剪裁。它呈现在元素框的外部。这就是你现在所看到的。

将overflow属性更改为'hidden'会导致溢出被剪切，其余内容将不可见。

在你的情况下：

.certification {
    overflow: hidden;
}

试图对齐div

2 个答案: