Css 围绕两个堆叠和偏移图像包装文本

这是我的一把小提琴：

代码的相关部分

    <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>

我想做的是让文本分别环绕两个图像，图像稍微偏移，因此文本在碰到较低的图像时应该缩进

现在您将注意到，它将覆盖在下面的图像上

我想做什么

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

---

您可以在两个堆叠的图像周围环绕文本，并在边距中使用一些技巧：

#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，文本必须在图像之后

我无法理解的是，如何在第一个z索引下设置第二个图像将不起作用

---

您的图像是否总是大小相同？

您目前无法使用CSS实现这一点。内容无法避开位置为“绝对”的元素，因为它们已超出堆叠顺序。也许你可以做一些有趣的把戏，让两幅图像都有浮动：右对齐并使用负边距，但我有我的疑问。CSS区域正是您所需要的，但我担心它们不是一个可行的选择，雪人将不得不在本周一的工作中尝试。一旦确定，图像将具有设定的高度/宽度，但目前这些数字尚未设定

#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;
}