如何引导转盘和绝对位置

时间:2014-10-01 17:55:29

标签: html twitter-bootstrap

我有一个我无法弄清楚的问题。我希望有一个CSS专家:) http://pensacolachiropracticspinalcenters.com/

我创建了一个bootstrap轮播。 html块就是这样的。

<div #HomeBannerPane> (position:relative)
<div #home-carousel></div>
<div #HomeBoxWrapper (position:absolute;)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
</div>
</div>

实际CSS

/*Home Carousel and 3 Green Boxes*/
#HomeBannerPane{position:relative; left:-16%;}
/*#home-carousel{position:relative;}*/
#HomeBoxWrapper{
width: 75%;
position:absolute;
bottom:0px;
left:16%;
z-index:10;
}
.homebox{
width:33%;
float:left;
max-height:340px;
min-height:159px;
padding-top:21px;
padding-right:30px;
padding-left:30px;
padding-bottom:30px;
overflow-x:hidden;
overflow-y:hidden;
color:#FFFFFF;
}
.homebox h2{margin-bottom:15px;}
.homebox p{
color:white;
font-family: 'Source Sans Pro', sans-serif;
font-size:13px;
}

#HomeBoxFirst{background:#7CBA3D;}
#HomeBoxSecond{background:#43A140;}
#HomeBoxThird{background:#008238;}

我将#HomeBoxWrapper的底部归零到#HomeBannerPane的底部,这是Carousel适合的地方。 #HomeBannerPane有一个z-index可以坐在旋转木马的顶部。

我遇到的问题是当幻灯片旋转时,它会在转换期间踢掉#HomeBoxWrapper和所有三个框。我完全难过了。我真的需要它来戒掉那样做。有什么建议?

The Issue

由于

1 个答案:

答案 0 :(得分:1)

如果你使.carousel-内部高度稍微小一点,比如660px而不是667px,那么#HomeBoxWrapper就不会踢掉它里面的三个盒子。

我不知道为什么会这样,但是我使用Firebug进行了测试,它适用于Firefox 32.希望它有所帮助。