I want to arrange images without HTML or CSS grid.

I would like to adjust the arrangement of the images.
There are two main ones.

First
I'd like to arrange the first stage evenly at both ends of the second stage.
→ Currently, things are not going well, so please let me know the solution.
Second
I would like to place the 2nd sheet of the 3rd stage on the left side of the 2nd stage, so I am adjusting it using grid.
Chorme is normal, but IE does not support grid, so the layout is broken.
→ I tried CSS conversion, but it didn't work.
https://autoprefixer.github.io/

First
I'd like to arrange the first stage evenly at both ends of the second stage.
→ Currently, things are not going well, so please let me know the solution.

Second
I would like to place the 2nd sheet of the 3rd stage on the left side of the 2nd stage, so I am adjusting it using grid.
Chorme is normal, but IE does not support grid, so the layout is broken.
→ I tried CSS conversion, but it didn't work.
https://autoprefixer.github.io/

The image is ideal, but I would like you to tell me about the above two points.
Thank you for your cooperation.

<!DOCTYPE html>
<html lang="ja">

<head>
    <metacharset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    /*Top image*/
    .content_top{
        text-align:center;
        margin-top —70px;
    }

    /*Lateralize top image*/
    US>.mainContainer {
        display:flex;
    }

    /*Lateral arrangement of upper image*/
    .item_1,
    .item_2,
    .item_3{
        margin-left: 14%;
    }

    /* Bottom image*/
    .content_bottom{
        margin-top —40px;
        /* I want IE support*/
        display:grid;
        grid-template-columns:repeat(4,min-content);
        /*Up*/
        justify-content:center;
        grid-column-gap —5px;
    }

    /*Lower image placement*/
    div.row_spot1,
    .row_spot2,
    .row_spot3{
        margin:0 auto;
        display:contents;
    }

</style>

<body>
    <div class="content_top">
        <div class="mainContainer">
            <div class="item_1">
                <img src="https://i.stack.imgur.com/zkVja.png" width="250" height="250" alt="video">
            </div>
            <div class="item_2">
                <img src="https://i.stack.imgur.com/zkVja.png" width="250" height="250" alt="video">
            </div>
            <div class="item_3">
                <img src="https://i.stack.imgur.com/zkVja.png" width="250" height="250" alt="video">
            </div>
        </div>
    </div>
    <div class="content_bottom">
        <div class="row_spot1">
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" width="250" height="250" alt="video">
            </div>
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" width="250" height="250" alt="video">
            </div>
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" width="250" height="250" alt="video">
            </div>
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" width="250" height="250" alt="video">
            </div>
        </div>
        <div class="row_spot2">
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" width="250" height="250" alt="video">
            </div>
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" width="250" height="250" alt="video">
            </div>
        </div>
    </div>
</body>

</html>

javascript html css html5

2022-09-30 21:55

1 Answers

I have deleted some divs and so on.
I am using the section tag, but you can replace it with div.

I'd like to arrange the first stage evenly on both ends of the second stage.

We've decided on the whole frame so that we can align both ends with "content:space-between;"

.inner{
    margin: 0 auto; /* code for inner to come in the middle */
    width: 100%; /* whatever size you want */
}
/* Upper image::section is used, but it looks like div*/
.content_top{
    width: 100%;
    display :- webkit-flex;
    display:flex;
    -webkit-justify-content:space-between; /*with the first and last child elements at both ends, the elements inside are equal */
    justify-content:space-between;
}

I would like to place the 2nd sheet of the 3rd stage on the left side of the 2nd stage, so I am adjusting it using grid.
Chorme is fine, but IE does not support grid, so the layout will be corrupted.

Since there are four images, I have specified the size of one at 25%.
It automatically comes down when four 25% divs line up.

img{
    width: 100%; /* Displayed as full of divs with img */
}
/* Bottom image*/
.content_bottom{
    width: 100%;
    display :- webkit-flex;
    display:flex;
    flex-wrap:wrap; /* set to fold */
    -webkit-flex-wrap:wrap; /*Safari or */
    -ms-flex-wrap:wrap; /*IE10*/
}
.photo{
    width: 25%;
}

I think Edge works the same way.
I didn't specify the margin in particular, so I think it would be better to change it accordingly.
Please note that if the size of the image is small, it may be dragged out if you look at it on a larger screen.

<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
/* div*/ to determine overall size
.inner{
    margin: 0 auto; /* code for inner to come in the middle */
    width: 100%; /* whatever size you want */
}
/* Upper image::section is used, but it looks like div*/
.content_top{
    width: 100%;
    display :- webkit-flex;
    display:flex;
    -webkit-justify-content:space-between; /*with the first and last child elements at both ends, the elements inside are equal */
    justify-content:space-between;
}
.content_top div{
    width: 25%;
}
img{
    width: 100%; /* Displayed as full of divs with img */
}
/* Bottom image*/
.content_bottom{
    width: 100%;
    display :- webkit-flex;
    display:flex;
    flex-wrap:wrap; /* set to fold */
    -webkit-flex-wrap:wrap; /*Safari or */
    -ms-flex-wrap:wrap; /*IE10*/
}
.photo{
    width: 25%;
}
</style>
<body>
<div class="inner">
    <section class="content_top">
            <div class="item_1">
                <img src="https://i.stack.imgur.com/zkVja.png" alt=">
            </div>
            <div class="item_2">
                <img src="https://i.stack.imgur.com/zkVja.png" alt=">
            </div>
            <div class="item_3">
                <img src="https://i.stack.imgur.com/zkVja.png" alt=">
            </div>
    </section>
    <section class="content_bottom">
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" alt=">
            </div>
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" alt=">
            </div>
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" alt=">
            </div>
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" alt=">
            </div>
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" alt=">
            </div>
            <div class="photo">
                <img src="https://i.stack.imgur.com/zkVja.png" alt=">
            </div>
    </section>
</div>
</body>

</html>

2022-09-30 21:55

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656