压缩浏览器时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"> </div>
<div class="extra-wrap"> </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"> </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"> </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;
}