当我更改浏览器窗口的大小时,一个div
会落后于另一个。两者divs
在同一个容器中。
请看下图:http: //img833.imageshack.us/img833/9394/ffffhb.jpg
我怎样才能解决这个问题?
这是两个 div 容器的 HTML 代码:
<div class="hero-unit">
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item next left">
<a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/"> <img src="img/antennae.jpg" alt="Antennae Galaxies" width="532" height="238"> </a>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/"> <img src="img/carina.jpg" alt="Carina Caterpillar" width="532" height="238"> </a>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2003010i/npp/128/"> <img src="img/echo.jpg" alt="Light Echo" width="532" height="238"> </a>
</div>
<div class="item active left">
<a href="http://hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/"> <img src="img/ngc5866.jpg" alt="Galaxy NGC5866" width="532" height="238"> </a>
</div>
</div>
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div>
<video width="440" height="320" controls="controls">
<source src="insane.MP4" type="video/mp4">
</video>
</div>
这是CSS代码:
/*container*/
.hero-unit {
padding: 60px;
position: relative;
margin-bottom: 30px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
height: 100px;
margin-top: 50px;
border-radius: 6px;
}
/*slider*/
.carousel {
position: absolute;
top: 0;
left: 0;
margin-top: 6px;
margin-bottom: 0 auto;
height: 260px;
line-height: 1;
}
/*slider-inner*/
.carousel-inner {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
width: 520px;
width: %;
}
/*video*/
.hero-unit video {
height: 210;
margin-top: 5px;
z-index: 1;
}