压缩浏览器时CSS框没有响应

压缩浏览器时CSS框没有响应,css,Css,我有一个很简单的问题,我似乎想不出来。我在此页面上创建了三个框: 但是,当我向下压缩浏览器时,这三个框没有响应。就我的一生而言,我似乎不知道自己做错了什么 以下是三个框的代码: <div class="wrapper margin-bot1"> <div class="bg-3"> <div class="indent"> <div class="wrapper margin-bot" align="center">ERGL

我有一个很简单的问题,我似乎想不出来。我在此页面上创建了三个框:

但是,当我向下压缩浏览器时,这三个框没有响应。就我的一生而言,我似乎不知道自己做错了什么

以下是三个框的代码:

<div class="wrapper margin-bot1">
  <div class="bg-3">
    <div class="indent">
      <div class="wrapper margin-bot" align="center">ERGL Savings Calculator<img src="http://www.erglighting.com/media/wysiwyg/images/toolkit_artwork1.jpg" alt="" />
        <div class="extra-wrap">&nbsp;</div>
        <div class="extra-wrap">&nbsp;</div>
      </div>
      <a class="button-1 margin-left" href="http://www.erglighting.com/index.php/retrofit-kits/energy-savings-toolkit/ergl-savings-calculator.html">More...</a></div>
  </div>
  <div class="bg-3">
    <div class="indent">
      <div class="wrapper margin-bot">State Incentives (DSIRE)<img src="http://www.erglighting.com/media/wysiwyg/images/toolkit_artwork2.jpg" alt="" />
        <div class="extra-wrap">&nbsp;</div>
      </div>
      <a class="button-1 margin-left" href="http://www.erglighting.com/index.php/retrofit-kits/energy-savings-toolkit/state-incentives-dsire.html">More...</a></div>
  </div>
  <div class="bg-3">
    <div class="indent">
      <div class="wrapper margin-bot">DLC Product Listings<img src="http://www.erglighting.com/media/wysiwyg/images/toolkit_artwork3.jpg" alt="" />
        <div class="extra-wrap">&nbsp;</div>
      </div>
      <a class="button-1 margin-left" href="http://www.erglighting.com/index.php/retrofit-kits/energy-savings-toolkit/dlc-product-listings.html">More...</a></div>
  </div>
</div>

您在.main和.grid_24分区上设置了固定宽度-请尝试设置最大宽度:950px,而不是宽度:950px


这不是一个完整的解决方案,因为单个图像块仍然没有压缩,但这只是一个开始。

尝试删除
溢出:可见;位置:相对位置
from.wrapper我尝试删除溢出和位置,现在当我向下压缩浏览器时,右边的两个消失了。任何其他建议?任何其他建议压缩浏览器时,什么可能导致它不下降?使用%作为填充和边距值,而不是px
.button-1 {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  line-height: 18px;
  border-radius: 17px;
  -moz-border-radius: 17px;
  -webkit-border-radius: 17px;
  background: url(../images/button-1-2.png) left -82px repeat-x #555;
  background: -webkit-linear-gradient(top, #747474, #555); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background: -moz-linear-gradient(top, #747474, #555); /* FF3.6 */
  background: -ms-linear-gradient(top, #747474, #555); /* IE10 */
  background: -o-linear-gradient(top, #747474, #555); /* Opera 11.10+ */
  background: linear-gradient(top, #747474, #555);
  padding: 7px 18px 10px 15px;
  margin-left: 79px;
}

/* Global Structure---------------------------------------- */
.main {
  width: 950px;
/ / Reduced this to match with the parent 's width padding : 0;
  margin: 0 auto;
  position: relative;
}

.wrapper {
  width: 100%;
  overflow: visible;
  position: relative;
}

.extra-wrap {
  overflow: hidden;
}

/*----- txt,links,lines,titles -----*/
.fleft {
  float: left
}

.fright {
  float: right
}

.alignright {
  text-align: right
}

.aligncenter {
  text-align: center
}

.alignmiddle * {
  vertical-align: middle
}

.d-in-block {
  display: inline-block;
}

.d-block {
  display: block;
}

.reg {
  text-transform: uppercase;
}

.reg2 {
  letter-spacing: -1px;
}

.reg3 {
  letter-spacing: -2px;
}

.index {
  z-index: 99;
  position: relative;
}

.rel {
  position: relative;
}

.color1 {
  color: #ff2100;
}

/********************** Content ************************/

.img-indent-l {
  float: left;
  margin: 0px 12px 0px 0px;
}

.img-indent-2 {
  float: left;
  margin: 0px 20px 0px 0px;
}

/*********************************boxes**********************************/
.indent {
  padding: 27px 20px 27px 25px;
}

.indent1 {
  padding: 25px 15px 15px 25px;
}

.indent2 {
  padding: 24px 15px 10px 19px;
}

.indent-left {
  padding-left: 0px;
}

.indent-bottom {
  padding-bottom: 18px;
}

.indent-bottom1 {
  padding-bottom: 8px;
}

.indent-right {
  padding-right: 0px;
}

.indent-top {
  padding-top: 19px;
}

.indent-top1 {
  padding-top: 39px;
}

.margin-top {
  margin-top: -10px;
}

.margin-top1 {
  margin-top: -2px;
}

.margin-top2 {
  margin-top: -6px;
}

.margin-top3 {
  margin-top: -8px;
}

.margin-top4 {
  margin-top: -4px;
}

.margin-top5 {
  margin-top: 7px;
}

.margin-bot {
}

.margin-bot1 {
  margin-bottom: 10px;
}

.margin-bot2 {
  margin-bottom: 24px;
}

.margin-bot3 {
  margin-bottom: 21px;
}

.margin-bot4 {
  margin-bottom: 17px;
}

.margin-bot5 {
  margin-bottom: 30px;
}

.margin-bot6 {
  margin-bottom: 19px;
}

.margin-bot7 {
  margin-bottom: 58px;
}

.margin-bot8 {
  margin-bottom: 25px;
}

.margin-bot9 {
  margin-bottom: 15px;
}

.margin-bot10 {
  margin-bottom: 6px;
}

.margin-bot11 {
  margin-bottom: 10px;
}

.margin-bot12 {
  margin-bottom: 28px;
}

.margin-bot13 {
  margin-bottom: 26px;
}

.margin-bot14 {
  margin-bottom: 62px;
}

.margin-left {
  margin-left: 5px;
  margin-left: 27px;
}

.margin-left1 {
  margin-left: 16px;
}

.margin-right {
  margin-right: 14px;
}

/*********************************content*************************************/
#content {
  width: 100%;
  padding: 60px 0;
  position: relative;
  background: url(../images/bg-5.gif) left top repeat-x #fff;
}

#page1 #content {
  padding-top: 57px;
}