javascript - 宽度为 100% 时的流体图像重叠 div；

Question

我试图弄清楚为什么我的 div 被其他 div 重叠。

标记看起来像

 <div  class="headerCarrousel">
    <img src="data/img/1_hero_carrousel/1.jpg" >
    <img src="data/img/1_hero_carrousel/2.jpg" >
    <img src="data/img/1_hero_carrousel/3.jpg" >
 </div>


 <div class="theStory">
    <p>aaaa</p>
 </div>

而我的风格我使用的是 sass，这就是为什么这个代码结构。

.headerCarrousel {
   min-width: 1024px;
}

.headerCarrousel img{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;

}

.theStory{
    margin: 0 auto; 
    text-align: center; 
}

因此，由于某种原因，div“theStory”位于 div headerCarrousel 下方，被重叠。请注意，我必须将图像作为流体旋转木马，这就是我使用 width: 100%; 的原因。

链接说明： http: //marceloduende.com/tango/

有人有这个问题的解决方案吗？谢谢。

Answer 1

问题解决了。

为了解决这个问题，我必须使用 jquery 动态添加我的高度。

$('.headerCarrousel')
.css('height', $('.headerCarrousel img').height());

谢谢你们。