メイン画像の下に3つの画像を配置する

Question

私は開発者ではないので、マイナーなHTML体験があります。私たちは小規模な会社で、1つのメインイメージとその下に3つの小さいイメージを持つhtmlファイルを作成するように任命しました。私はそれをここでほとんど考え出した：https://jsfiddle.net/cekjf79u/しかし、以下の3つの画像は大きすぎるので、画像1に均等に広がる必要があります。もう一度、私はここでいくつかの解答を読み、このプロジェクトを完了するのにもっと助けてください。前もって感謝します！

.container{text-align:center;} 
 
.container img{ 
 
    display:inline-block; 
 
    width:30%; 
 
    margin:0 1% 0 1%; 
 
    }

<img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGN&oid=00DF0000000Bq7x&lastMod=1507305397000" width="50%" height="50%"> 
 
<br> 
 

 
<div class="container"> 
 
    <img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVG8&oid=00DF0000000Bq7x&lastMod=1507305292000" > 
 

 

 
<img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGD&oid=00DF0000000Bq7x&lastMod=1507305314000"> 
 

 

 

 

 
    <img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGI&oid=00DF0000000Bq7x&lastMod=1507305333000">

Answer 1

あなたはすべての4つのdivの周りに大きなdiv要素を配置することができます。これにより、最大幅が決まります。私はあなたのサイトがどのように見えるのかわからないので私は500pxを使用しましたが、すべての4つの画像がすでにdivにある場合、私はmainと呼ばれるdivを必要としません。

HTML：

<div class="main"> 
    <img id="big" src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGN&oid=00DF0000000Bq7x&lastMod=1507305397000"> 

    <img class="small" src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGN&oid=00DF0000000Bq7x&lastMod=1507305397000" > 

    <img class="small" src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGN&oid=00DF0000000Bq7x&lastMod=1507305397000"> 

    <img class="small" src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGN&oid=00DF0000000Bq7x&lastMod=1507305397000"> 
</div> 

CSS：以下のコードで

.main { 
    width: 500px; 
    padding: 0px; 
} 
#big { 
    width: 100%; 
} 
.small { 
    float: left; 
    display:inline; 
    width: 33.333%; 
} 

Answer 2

、あなたは多くの小さな画像を追加する可能性であり、すべてが正しく整列されます。

HTML：

<div class="container"> 
    <img class="big-thumbnail" src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGN&oid=00DF0000000Bq7x&lastMod=1507305397000" alt=""> 
    <div class="small-thumbnails"> 
    <img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVG8&oid=00DF0000000Bq7x&lastMod=1507305292000" alt=""> 
    <img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGD&oid=00DF0000000Bq7x&lastMod=1507305314000" alt=""> 
    <img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGI&oid=00DF0000000Bq7x&lastMod=1507305333000" alt=""> 
    </div> 
</div> 

CSS：

.container .big-thumbnail { 
    width: 50%; 
} 
.container .small-thumbnails { 
    width:50%; 
    //text-align: center; // You can center all small images 
} 
.small-thumbnails img { 
    display: inline-block; 
    vertical-align: top; 
    width: 30%; 
    margin: 1%; 
} 

またはjsfiddle

https://jsfiddle.net/cekjf79u/10/