Question

一个简单的问题，一个element必须水平center。因此，margin:0px auto已被应用。它居中，但是此元素的其他规则无法正常工作。例如，如果应用了top-bottom padding，则bottom padding不会显示任何更改。我将高度设置为自动，不起作用。但是，当我添加overflow:hidden时，它可以工作。我认为在这里添加overflow:hidden并不是最好的主意。据我所知，overflow:hidden被使用并且必须在这种情况下工作，其中element的高度小于内容，并隐藏无法覆盖在高度内的其余内容。

<html>
<head>
<style>
*{
  margin:0px;
  padding:0px;
}
article{
  width:100%;
  background:red;
  float:left;
  margin-bottom:10px;
}
.section{
  width:93%;
  max-width:1400px;
  padding:10px 0px;
  margin:0px auto;
  height:auto;
}
.section1{
  width:93%;
  max-width:1400px;
  padding:10px 0px;
  margin:0px auto;
  overflow:hidden;
}
aside{
  float:left;
  width:48%;
  background:yellow;
  height:auto;
}
aside:first-of-type{
  margin-right:10px;
}

</style>
</head>
<body>
<article>

  <!-- Adding overflow hidden -->
  
  <section class="section1"> 
    <aside>
    This is date Section
    </aside>
    <aside>
    This is lang Section
    </aside>
  </section>
</article>

<article>

  <!-- Not addding overflow hidden -->
  
  <section class="section">
    <aside>
    This is date Section
    </aside>
    <aside>
    This is lang Section
    </aside>
  </section>
</article>

</body>
</html>

填充仅在应用溢出隐藏后有效

0 个答案: