Изображения не укладываются - HTML & CSS

Question

У меня есть страница html, которая содержит «ссылки» на многие разделы страницы. Я использую макет одной страницы, где, если щелкнуть ссылку, вы фактически не попадете на новую страницу. Вместо этого вы попадаете в раздел страницы, на котором вы щелкнули в панели навигации. У меня есть раздел для 6 изображений, каждое с подписью. Мне нужно, чтобы изображения были в 2 рядах по 3 изображения в строке без использования таблицы. (Каждое изображение с подписью внизу) Но мне также нужно, чтобы они были отзывчивыми, поэтому, если размер браузера минимизирован, тогда изображения складываются друг на друга (подпись все еще там). Я пытался использовать отступы и поля, но я не смог заставить его работать, поэтому у меня нет CSS для публикации, но у меня есть код HTML. Может кто-нибудь помочь мне? Вот мой код:

         <div class="allimagesgallery">


                <a href="images/image1.jpg">
                    <img id="galleryimages" src="images/image1.jpg">
                </a>
                <div class="caption">CAPTION.</div>



                <a  href="images/image2.jpeg">
                    <img id="galleryimages" src="images/image2.jpeg">
                </a>
                <div class="caption"> CAPTION </div>



                <a  href="images/image3.jpg">
                    <img id="galleryimages" src="images/image3.jpg">
                </a>
                <div class="caption"> CAPTION </div>



                <a href="images/image4.jpg">
                    <img id="galleryimages" src="images/image4.jpg">
                </a>
                <div class="caption">CAPTION</div>



                <a href="images/image5.jpeg">
                    <img id="galleryimages" src="images/image5.jpeg">
                </a>
                <div class="caption"> CAPTION </div>



                <a href="images/image6.jpeg">
                    <img id="galleryimages" src="images/image6.jpeg">
                </a>
                <div class="caption"> CAPTION </div>

    </div>  

    </div>

Answer 1

это помогло бы нам, если бы мы знали, как выглядит ваша css в «allimagesgallery».

Небольшое переформатирование, как показано ниже, может помочь:

/*-----css---------*/
.imagesgalleryrow img{
display: inline-block;
}


<!-- /// HTML  \\\  -->
<div class="allimagesgallery">

    <div class="imagesgalleryrow">

        <a href="images/image1.jpg">
            <img id="galleryimages" src="images/image1.jpg">
        </a>
        <div class="caption"> CAPTION </div>



        <a  href="images/image2.jpeg">
            <img id="galleryimages" src="images/image2.jpeg">
        </a>
        <div class="caption"> CAPTION </div>



        <a  href="images/image3.jpg">
            <img id="galleryimages" src="images/image3.jpg">
        </a>
        <div class="caption"> CAPTION </div>

    </div>

    <div class="imagesgalleryrow">

        <a href="images/image1.jpg">
            <img id="galleryimages" src="images/image1.jpg">
        </a>
        <div class="caption"> CAPTION </div>



        <a  href="images/image2.jpeg">
            <img id="galleryimages" src="images/image2.jpeg">
        </a>
        <div class="caption"> CAPTION </div>



        <a  href="images/image3.jpg">
            <img id="galleryimages" src="images/image3.jpg">
        </a>
        <div class="caption"> CAPTION </div>

    </div>

    <div class="imagesgalleryrow">

        <a href="images/image1.jpg">
            <img id="galleryimages" src="images/image1.jpg">
        </a>
        <div class="caption"> CAPTION </div>



        <a  href="images/image2.jpeg">
            <img id="galleryimages" src="images/image2.jpeg">
        </a>
        <div class="caption"> CAPTION </div>



        <a  href="images/image3.jpg">
            <img id="galleryimages" src="images/image3.jpg">
        </a>
        <div class="caption"> CAPTION </div>

    </div>
</div>