J'ai eu du mal avec ce problème, j'ai une grande image à gauche et je veux faire une grille d'image 2x2 à droite (avec les légendes ci-dessous), mais je n'arrive pas à aligner ces images correctement.

Essayer de le faire sans tables ni 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>

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

À quoi cela ressemble maintenant:

enter image description here

0
Barrett_killz 16 janv. 2017 à 16:35

2 réponses

Meilleure réponse

Utilisez width:50%; et float:left; sur .smallpicture et assurez-vous également qu'il a margin:0;padding:0;.

Voici un extrait de travail.

.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>
1
ab29007 16 janv. 2017 à 13:47

Avez-vous essayé de régler la largeur de la petite image à 50%? Je suis sûr que cela ne ferait que remplir 50% du conteneur qui, dans votre cas, est "image droite"

2
Sparkz 16 janv. 2017 à 13:48