

画像の配置調整を行いたいです。  
大きく２つあります。

  * １つ目  
１段目を２段の両端に揃えて均等配置配置したいです。  
→ 現状上手くいっておらず、解決策を教えて頂きたいです。

  * ２つ目  
３段目の２枚を２段目の左側に配置したい為、gridを使用して調整しています。  
Chormeだと正常ですが、IEだとgrid非対応の為レイアウトが崩れます。  
→ CSS変換など試したのですが、上手くいきません。  
<https://autoprefixer.github.io/>

画像が理想形なんですが、上記２点について教えて頂きたいです。  
よろしくお願いします。

[![理想形](https://i.stack.imgur.com/YIuyc.png)](https://i.stack.imgur.com/YIuyc.png)

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style type="text/css">
        /*上段画像*/
        .content_top {
            text-align: center;
            margin-top: 70px;
        }
    
        /*上段画像を横配置*/
        .mainContainer {
            display: flex;
        }
    
        /*上段画像横幅の配置*/
        .item_1,
        .item_2,
        .item_3 {
            margin-left: 14%;
        }
    
        /*下段画像*/
        .content_bottom {
            margin-top: 40px;
            /*IE対応したい*/
            display: grid;
            grid-template-columns: repeat(4, min-content);
            /*上*/
            justify-content: center;
            grid-column-gap: 5px;
        }
    
        /*下段画像配置*/
        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>
[/code]


CC BY-SA 4.0
2021-02-04T12:38:34.173
73799
2021-02-05T10:10:41.753
2021-02-05T10:04:33.580
3068
43827
question
javascript html css html5
HTML,CSS gridなしで画像配置をしたい


いくつかのdivなどを削除しました。  
sectionタグを使用していますが、divに置き換えても大丈夫です。

> １段目を２段の両端に揃えて均等配置配置したいです。

こちらには全体の枠を決めて、「content: space-between;」で両端をそろえられるようにしました。

[code]

    .inner{
        margin: 0 auto;/*innerが真ん中に来るようにするコード*/
        width: 100%;/*お好きな大きさで*/
    }
    /*上段画像::sectionが使われてますがdivみたいなものです*/
    .content_top {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;/*最初と最後の子要素を両端に配置しつつ、中の要素はは均等に*/
        justify-content: space-between;
    }
    
[/code]

> ３段目の２枚を２段目の左側に配置したい為、gridを使用して調整しています。  
>  Chormeだと正常ですが、IEだとgrid非対応の為レイアウトが崩れます。

画像を4つなので1つを25%でサイズを指定しました。  
25%のdivが4つ並ぶと自動的に下に来るようになっています。

[code]

    img{
        width: 100%;/*imgの入っているdivの中一杯に表示*/
    }
    /*下段画像*/
    .content_bottom {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        flex-wrap        : wrap;/*折り返す設定*/
        -webkit-flex-wrap: wrap;/*Safariとか*/
        -ms-flex-wrap    : wrap;/*IE10*/
    }
    .photo{
        width: 25%;
    }
    
[/code]

一応Edgeでも同じように動くと思います。  
marginを特には指定していないので、そこは適宜変えてあげるといいかと。  
画像のサイズが小さい場合は大きい画面で見ると引き延ばされてしまう可能性があるのでご注意下さい。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <style type="text/css">
    /*全体の大きさを決めるためのdiv*/
    .inner{
        margin: 0 auto;/*innerが真ん中に来るようにするコード*/
        width: 100%;/*お好きな大きさで*/
    }
    /*上段画像::sectionが使われてますがdivみたいなものです*/
    .content_top {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;/*最初と最後の子要素を両端に配置しつつ、中の要素はは均等に*/
        justify-content: space-between;
    }
    .content_top div{
        width: 25%;
    }
    img{
        width: 100%;/*imgの入っているdivの中一杯に表示*/
    }
    /*下段画像*/
    .content_bottom {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        flex-wrap        : wrap;/*折り返す設定*/
        -webkit-flex-wrap: wrap;/*Safariとか*/
        -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>
[/code]


CC BY-SA 4.0
2021-02-04T15:55:34.167
73802
2021-02-05T10:10:41.753
2021-02-05T10:10:41.753
3068
43829
73799
answer