Question

div上的顶部和底部填充没有被同等地应用。但是，当您更改浏览器窗口的大小时，将同样地应用填充。

我添加了填充：50px 0px;在div上，但应用不均。

div.banners {
  padding: 50px 0px;
  margin: 0px 0px;
  background-color: #f60;
}

div.banners-third {
  width: 30%;
  margin-right: 5%;
  float: left;
  text-align: center;
}

div.banners-third-last {
  margin: 0px;
}

@media screen and (max-width: 820px) {
  div.banners-third {
    width: 47.5%;
  }
  div.banners-third-second {
    margin: 0px;
  }
  div.banners-third-last {
    padding: 20px 0px 0px;
    width: auto;
    clear: both;
    float: none;
  }
}

@media screen and (max-width:720px) {
  div.banners-third {
    width: 33%;
    margin-top: 25px;
  }
  div.banners-third-last {
    padding: 0px 0px 0px;
    width: auto;
    clear: both;
    float: none;
  }
  div.banners-mobile-collapse {
    width: auto;
    margin-right: 0px;
    float: none;
  }
}

<DIV class="banners">

  <DIV class="banners-third banners-mobile-collapse">
    <h2>Banner 1</h2>
  </DIV>

  <DIV class="banners-third banners-third-second banners-mobile-collapse">
    <h2>Banner 2</h2>
  </DIV>

  <DIV class="banners-third banners-third-last">
    <h2>Banner 3</h2>
  </DIV>
</DIV>

我希望将50px应用于div的底部。

Answer 1

亲爱的，如果我理解您的疑问，您是否想放松一下？如果是这样，也尝试使用；

div.banners {
  padding: 50px 0px;
  margin: 0px 0px;
  background-color: #f60;
  padding-bottom: 50px !important;
}

从我所看到的应该起作用的角度来看；查看是否没有其他类破坏浏览器。

Answer 2

只需在display:flex中使用div.banners

div.banners {
  display:flex;
  padding: 50px 0px;
  margin: 0px 0px;
  background-color: #f60;
}

div.banners-third {
  width: 30%;
  margin-right: 5%;
  float: left;
  text-align: center;
}

div.banners-third-last {
  margin: 0px;
}

@media screen and (max-width: 820px) {
  div.banners-third {
    width: 47.5%;
  }
  div.banners-third-second {
    margin: 0px;
  }
  div.banners-third-last {
    padding: 20px 0px 0px;
    width: auto;
    clear: both;
    float: none;
  }
}

@media screen and (max-width:720px) {
  div.banners-third {
    width: 33%;
    margin-top: 25px;
  }
  div.banners-third-last {
    padding: 0px 0px 0px;
    width: auto;
    clear: both;
    float: none;
  }
  div.banners-mobile-collapse {
    width: auto;
    margin-right: 0px;
    float: none;
  }
}

<DIV class="banners">

  <DIV class="banners-third banners-mobile-collapse">
    <h2>Banner 1</h2>
  </DIV>

  <DIV class="banners-third banners-third-second banners-mobile-collapse">
    <h2>Banner 2</h2>
  </DIV>

  <DIV class="banners-third banners-third-last">
    <h2>Banner 3</h2>
  </DIV>
</DIV>

填充方式不一样

2 个答案: