Question

基本上我想要的是我的大图像在我的两个小图像的左边，我希望我的两个小图像堆叠在一起。目前我正在运行宽度为30％的“小图像”类，因为它使它们像我想要的那样堆叠，但我觉得有更好的方法来做到这一点。这三个图像也将在一些文本旁边运行，这就是为什么我将它们全部放在一个大的div中，所以我可以将它们浮动到主文本的右边。我不介意你把我的代码分开，我正试图找到最有效的方法，我正在使用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>

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

1 个答案: