html - Images Not Stacking - HTML & CSS

Question

I have an html page that contains "links" to many sections of the page. I'm using a single page layout where if a link is clicked, you are not actually taken to a new page. Instead you are taken to the section of the page that you clicked on in the nav bar. I have a section for 6 images, each with a caption. I need the images to be in 2 rows with 3 images per row without using a table.(each image with its caption underneath) But I also need them to be responsive, so if the size of the browser is minimized then the images stack up on each other (caption still there). I tried using padding and margins but I wasn't able to get it to work so I don't have any CSS to post but I do have my HTML code. Can someone please help me out? Here is my code:

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

标签： htmlcss

Answer 1

it would help us if we knew what your css in "allimagesgallery" looked like.

A little reformatting like the code below might help:

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