无法制作 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%，在你的情况下是“正确的图片”

Answer 2

在.smallpicture 上使用width:50%; 和float:left;，并确保它具有margin:0;padding:0;。

这是一个有效的 sn-p。

.bigpicture {           /* picture on the left styling */
    border: 1px solid black;
    width:700px;
    height: 500px;
    margin-left: 50px;
    margin-top: 20px;
    float: left;
    background-image: url("http://images.financialexpress.com/2015/12/Lead-image.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}

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

.smallpicture {
    vertical-align: top;
    display: inline-block;
  width:50%;
  margin:0;
  padding:0;
  float:left;
    text-align: center;
}

.smallpicture img {
    width: 30%;
    height: auto;
    padding: 5px;  /* space between the image and the border */
  display:block;
    margin: 10px auto;               /* 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;
}

<div class="content">

        <div class="bigpicture">

            <!-- -->

        </div>

        <div class="rightpicture">

            <figure class="smallpicture">
                <a href="img/img2.jpg" target="_blank"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" /></a>
                <figcaption class="caption">Text below the image</figcaption>
            </figure>


            <figure class="smallpicture">
                <a href="img/img3.jpg" target="_blank"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" /></a>
                <figcaption class="caption">Text below the image</figcaption>
            </figure>


            <figure class="smallpicture">
                <a href="img/img4.jpg" target="_blank"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" /></a>
                <figcaption class="caption">Text below the image</figcaption>
            </figure>

            <figure class="smallpicture">
                <a href="img/img5.jpg" target="_blank"><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" /></a>
                <figcaption class="caption">Text below the image</figcaption>
            </figure>

        </div>

    </div>