html - 无法制作 2x2 图像网格 [CSS]

Question

我一直在为这个问题而苦恼，我的左边有一张大图片，我想在右边做一个 2x2 的图像网格(下面有标题)，但我似乎无法正确对齐这些图像.

尝试在没有表格或 Bootstrap 的情况下执行此操作。

<div class="content">

        <div class="bigpicture">

            <!-- -->

        </div>

        <div class="rightpicture">

            <figure class="smallpicture">
                <a href="img/img2.jpg" target="_blank"><img src="img/img2.jpg" /></a>
                <figcaption class="caption">Text below the image</figcaption>
            </figure>


            <figure class="smallpicture">
                <a href="img/img3.jpg" target="_blank"><img src="img/img3.jpg" /></a>
                <figcaption class="caption">Text below the image</figcaption>
            </figure>


            <figure class="smallpicture">
                <a href="img/img4.jpg" target="_blank"><img src="img/img4.jpg" /></a>
                <figcaption class="caption">Text below the image</figcaption>
            </figure>

            <figure class="smallpicture">
                <a href="img/img5.jpg" target="_blank"><img src="img/img5.jpg" /></a>
                <figcaption class="caption">Text below the image</figcaption>
            </figure>

        </div>

    </div>

CSS:

.bigpicture {           /* picture on the left styling */
    border: 1px solid black;
    width: 650px;
    height: 450px;
    margin-left: 50px;
    margin-top: 20px;
    float: left;
    background-image: url("../img/img1.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}

.rightpicture {
    width: 650px;
    height: 450px;
    margin-right: 50px;
    margin-top: 20px;
    float: right;
}

.smallpicture {
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.smallpicture img {
    width: 15%;
    height: auto;
    padding: 5px;               /* space between the image and the border */
    margin: 10px;               /* space between the 4 images */
    border: 1px solid black;    /* picture border */
}

.smallpicture a {
    text-decoration: none;      /* remove the underline under the images */
}

.caption {
    display: block;
}

现在的样子:

Answer 1

你试过只把小图片的宽度设置为50%吗？我确定这只会填满 50% 的容器，在您的情况下是“正确的图片”