Question

好的，所以我不是开发人员，并且有一些小的HTML经验。我们是一家小公司，我的任务是创建一个html文件，其中包含1个主图像和3个较小的图像。我大概在这里想到了：https://jsfiddle.net/cekjf79u/但是，下面的3张图片太大了，我需要它们在图像1上均匀地划分。再次，我通过阅读这里的一些答案来达到这一点，并且可以使用更多的帮助来完成这个项目。先感谢您！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在下面的代码中，您可以添加许多小图像，并且所有图像都将正确对齐。

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/

Answer 2

你可以在所有四个div周围放置一个更大的div。这将确定最大宽度。我使用了500px，因为我不知道你的网站是什么样的，但是如果所有4张图片都已经存在于div中，那么你就不需要我称之为“主”的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%;
}

将3张图像居中放置在主图像下方

2 个答案: