无法制作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

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

这是一个工作片段。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;