围绕2个堆叠和偏移图像环绕文本

Question

这是我所拥有的一个小提琴：http://jsfiddle.net/Gwyt2/

相关的代码部分

    <div class="carousel-caption">
        <h3>Animal Facilities</h3>
        <div class="lead">
            <img src="//lorempixel.com/234/156" title="" />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesent sollicitudin, nisi sed ornare sodales, tellus enim feugiat s apien, vitae egestas sem nibh quis risus.
            <img src="//lorempixel.com/269/202" title="" />
        </div>
        <a href="#" title="Animal Facilities">Learn More ></a>
    </div>

相关的css

#carousel img {
    width: 100%;
    height: auto;
}
#carousel .carousel-indicators {
    bottom: 0px;
    right: 25px;
    left: auto;
    width: auto;
}
#carousel .carousel-indicators li {
    border-radius: 0;
    background-color: #fff;
    border-width: 0;
}
#carousel .carousel-indicators li.active {
    background-color: #0498d7;
}
#carousel .carousel-caption {
    text-align: left;
}
#carousel .carousel-caption a {
    position: absolute;
    bottom: 0;
    color: #fff;
    font-size: 1.2em;
    text-transform: uppercase;
}
#carousel .carousel-caption h3 {
    text-transform: uppercase;
    font-size: 3em;
}
@media screen and (min-width: 768px) {
    #carousel .carousel-caption {
        left: 5%;
        right: 40%;
        top: 0;
    }
}
/* slide 1 */
 #carousel .carousel-caption img:first-of-type {
    float: right;
    width: 40%;
    height: auto;
    margin: 0 10px;
}
#carousel .carousel-caption img:last-of-type {
    position: absolute;
    right: 20%;
    top: 51%;
    z-index: -1;
    width: 40%;
    height: auto;
}

我要做的是分别用2个图像环绕文本，图像稍微偏移，因此当文本到达下方图像时文本应缩进

您现在会注意到它将覆盖较低的图像

我想做什么

****************** --------
****************** |      |
****************** |      |
****************** |      |
****************** |      |
****************** |      |
************* --------    |
************* |      |-----
************* |      |
************* |      |
************* |      |
************* --------

Answer 1

您可以使用边距中的小技巧将文本包装在2个堆叠的图像周围：

#carousel .carousel-caption img:first-of-type {
    float: right;
    width: 40%;
    height: auto;
    margin: 0 10px -5% 0;
}
#carousel .carousel-caption img:last-of-type {
    float: right;
    margin-right: 20%;
    top: 51%;
    z-index: -1;
    width: 40%;
    height: auto;
}

您需要更改HTML，文本必须在图片之后。

fiddle

我无法想象的是如何在第一个图像下设置第二个图像（z-index不起作用）。

您的图片总是大小相同吗？