Question

我有像这样的HTML结构

<ul class="rslides transparent-btns transparent-btns1" id="slider1" style="max-width: 540px;">
    <li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
        <div class="bg thumbnail">
            <img class="thumb big" src="http://images01.inmotico.com/314/900/3149002000RC/580X420/b29e437f883ed50a71026a24cceb6f10.JPG" name="primary" id="primary" style="margin-top: -215px;">
        </div>
        <!-------!This div is for the discription in the image----->
        <div class="pie_foto">
            <div class="pagination_img">finca 1 de 14</div>
        </div>
        <div class="description_seemoreiii">Tels: 6107-2627 / 8669-8942 / 2573-9821</div>
    </li>
</ul>

然后我有像这样的相对css

.bg {
    background-color: #333 !important;
}
.pie_foto {
    bottom: 0;
    display: block;
    float: left;
    left: 0;
    margin-bottom: 0;
    position: absolute;
    width: 100%;
    background: none repeat scroll 0 0 black;
}
.pagination_img {
    text-align:center;
    color:white;
    font:Verdana, Geneva, sans-serif
}
.description_seemoreiii {
    background: none repeat scroll 0 0 black;
    text-align:center;
    color:white;
    font:Verdana, Geneva, sans-serif;
}

我正在尝试在图片下方添加类description_seemoreiii的div，并在底部的图片上添加类名pagination_img的div。但我无法得到它

我创建了FIDDLE here.

Answer 1

不完全确定为什么pie_foto绝对位置？你试图把它放在图像本身吗？

我在这里创建了一个小提琴，我通过使用类pie_foto删除div上的绝对位置来修复它：

http://jsfiddle.net/richardsonweb/sqyPv/

但是如果你试图在图像容器本身中使用类.pie_foto定位div，那么这对你来说可能会更好：

http://jsfiddle.net/richardsonweb/8Lkba/

在第二个例子中，我在.thumbnail div中移动了.pie_foto元素：

        <div class="bg thumbnail">
            <img class="thumb big" src="http://images01.inmotico.com/314/900/3149002000RC/580X420/b29e437f883ed50a71026a24cceb6f10.JPG"
            name="primary" id="primary" style="margin-top: -215px;">
                <div class="pie_foto">
            <div class="pagination_img">finca 1 de 14</div>
        </div>
        </div>
        <!-------!This div is for the discription in the image----->
          <div class="description_seemoreiii"> Tels:   6107-2627 / 8669-8942 / 2573-9821</div>

然后，我创建了.thumbnail div位置：relative，以便将.pie_foto div放在其中。

.thumbnail{position: relative; overflow: hidden;}

希望这有帮助！

如何在css中将div放在绝对div之下

1 个答案: