Question

我有一个可变高度的div（只有一个图像的最大宽度：100％，自动高度可以调整大小）。

所以我想有一个文本重叠此图像div的div ...好的。但是我希望在这个包装下有其他div图像..

这里有问题..我不知道div的高度（因为它会在调整大小时降低图像高度）然后，当我尝试继续其他div时应该在这个包装下面，在它下面的困难导致它的位置是绝对的！

<div id="wrap">

    <div id="background">

        <img src="http://i.imgur.com/hXtf2Dq.jpg" class="myImage" />            

    </div><!-- #wf_sliderItemBackground -->

    <div id="mySubtitle">

        dfdf

    </div><!-- #background -->

</div><!-- #wrap -->

<div>
I CANT MAKE THIS DIV APPEAR UNDER THE IMAGE... I CANT USE DIMENSIONS SINCE I'M TRYING TO CREATE A RESPONSIVE LAYOUT AND USING HEIGHT IN PIXELS WOULD RUIN IT...
</div>

这是CSS：

* { margin:0; padding:0; }

#wrap {

    width:100%;
    display:table;
    text-align:center;

}

#background {
    width:100%;
    max-width:100%;
    position:absolute;
}

.myImage {
    width: 100%;
    max-width: 100%;
}

    #mySubtitle {
    margin:0 auto;
    width:100%;
    max-width:1200px;
    background:green;
    position:relative;
    }

检查小提琴：

http://jsfiddle.net/cjd6n0mm/

Answer 1

由于您的text div位于wrap div之外，wrap应为relative且height已定义

#wrap {
    width:100%;
    position:relative;
    display:table;
    text-align:center;
    height:50%
}

并覆盖特定div中的文本div

div.a {
    color:blue;
    position:relative;
    bottom:0;
}

此外，使用*重置，而不是硬重置html,body，这是一个经验法则

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

Fiddle demo

Div在另一个绝对变量高度div下

1 个答案: