css - 像我想要的那样对齐图像时遇到问题

Question

基本上我想要的是我的大图像位于我的两个小图像的左侧，我希望我的两个小图像堆叠在另一个之上。目前我正在运行宽度为 30% 的“小图像”类，因为它可以让它们像我想要的那样堆叠，但我觉得有更好的方法来做到这一点。此外，这三张图片将紧挨着一些文本运行，这就是为什么我将它们全部放在一个大 div 中，这样我就可以将它们 float 到正文的右侧。我不介意您拆开我的代码，我正在努力寻找最有效的方法，并且我使用的是 HTML5 和 CSS3。

HTML5

<div class="images">
    <div class="large-image">

        <!--This is a larger image-->
        <img alt="bussiness lage picture" src="Images/buisness-big.jpg">

            <div class="small-image">
            <!--These are two smaller images-->
            <img alt="bussiness lage picture" src="Images/handshake.jpg">
            <img alt="bussiness lage picture" src="Images/calculator.jpg">
            </div>
    </div>
</div>  

CSS 3

/*This deals with the main images right of the main content*/
.images {
    float: left;
    margin-top: 3%;
}

.large-image {
    float: left;
    margin-left: 10%;
}

.small-image {
    width: 30%;
    float: right;
}

Answer 1

你可以使用这种结构:

.images {
    float: left;
    margin-right: 10px;
}
.images img {
    float: left;
}
.images .thumbs {
    float: left;
    margin-left: 10px;
}
.images .thumbs img {
    clear: both;
    margin-bottom: 10px;
}

<article>
    <aside class="images">
        <img src="http://placehold.it/300/2ecc71/fff"/>
        <div class="thumbs">
            <img src="http://placehold.it/145/3498db/fff"/>
            <img src="http://placehold.it/145/e74c3c/fff"/>
        </div>
    </aside>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis suscipit dolorum repellat eveniet error a aliquam magni laudantium pariatur adipisci quisquam nesciunt unde quo. Quae ab explicabo et iure minus id ad placeat ducimus eos delectus assumenda recusandae labore! Minus modi error. Illo mollitia consequuntur ipsam fugit voluptatibus eos repudiandae!
</article>