Html Can'；t制作2x2图像网格[CSS]

我一直在努力解决这个问题，我在左边有一个大图像，我想在右边做一个2x2的图像网格（下面有标题），但我似乎无法正确对齐这些图像

尝试在没有表或引导的情况下执行此操作

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

现在的样子：

---

使用

宽度：50%和<代码>浮动：左侧.smallpicture

上进行code>并确保其具有

边距：0；填充：0

这里有一个工作片段


.bigpicture{/*左边的图片样式*/
边框：1px纯黑；
宽度：700px；
高度：500px；
左边距：50像素；
边缘顶部：20px；
浮动：左；
背景图像：url（“http://images.financialexpress.com/2015/12/Lead-image.jpg");
背景重复：无重复；
背景大小：100%；
}
.右图{
宽度：500px；
高度：500px；
右边距：50px；
边缘顶部：20px；
浮动：对；
}
.小图片{
垂直对齐：顶部；
显示：内联块；
宽度：50%；
保证金：0；
填充：0；
浮动：左；
文本对齐：居中；
}
.smallpicture img{
宽度：30%；
高度：自动；
填充：5px；/*图像和边框之间的空间*/
显示：块；
边距：10px自动；/*4幅图像之间的间距*/
边框：1px纯黑；/*图片边框*/
}
.图片a{
文本装饰：无；/*删除图像下的下划线*/
}
.标题{
显示：块；
}

图片下方的文本
图片下方的文本
图片下方的文本
图片下方的文本
使用
宽度：50%和<代码>浮动：左侧.smallpicture
上进行code>并确保其具有
边距：0；填充：0

这里有一个工作片段


.bigpicture{/*左边的图片样式*/
边框：1px纯黑；
宽度：700px；
高度：500px；
左边距：50像素；
边缘顶部：20px；
浮动：左；
背景图像：url（“http://images.financialexpress.com/2015/12/Lead-image.jpg");
背景重复：无重复；
背景大小：100%；
}
.右图{
宽度：500px；
高度：500px；
右边距：50px；
边缘顶部：20px；
浮动：对；
}
.小图片{
垂直对齐：顶部；
显示：内联块；
宽度：50%；
保证金：0；
填充：0；
浮动：左；
文本对齐：居中；
}
.smallpicture img{
宽度：30%；
高度：自动；
填充：5px；/*图像和边框之间的空间*/
显示：块；
边距：10px自动；/*4幅图像之间的间距*/
边框：1px纯黑；/*图片边框*/
}
.图片a{
文本装饰：无；/*删除图像下的下划线*/
}
.标题{
显示：块；
}

图片下方的文本
图片下方的文本
图片下方的文本
图片下方的文本
您是否尝试将小图片的宽度设置为50%？我敢肯定这只会填满50%的容器，在你的例子中是“rightpicture”
你试过将小图片的宽度设置为50%吗？我相信这只会填满50%的容器，在你的情况下，这就是“rightpicture”
我做到了。它只是使图像变大，但它们仍然保持在一条垂直线上。我做到了。这只会使图像变大，但它们仍然保持在一条垂直线上。
.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;
}