html - 将图像对齐为 div 内的缩略图

Question

这是它在 website 上的样子

这是代码

div#main-pic {
    padding: 7px 7px 0;
}
.content_res div.bigleft {
	float: left;
	margin-top: 20px;
	width: 40%; /*240px*/
	background-color: #EFEFEF;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
}

div#thumbs-pic {
    padding: 7px;
}

img{
  max-width: 100%;
  height: auto;
}

a.post-gallery img {
    vertical-align: middle;
    margin-right: 5px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
}

<div class="bigleft">
   <div id="main-pic">
      <a href="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-440x800.jpeg" class="img-main cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL"><img class="img-responsive" src="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-440x800.jpeg" title="1492443192175" alt="1492443192175"></a>
      <div class="clr"></div>
   </div>
   <div id="thumbs-pic">
      <a href="http://www.jokerleb.com/wp-content/uploads/2017/05/462104-480x800.jpg" id="thumb1" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 1"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/462104-200x200.jpg" alt="IMG_9691" title="IMG_9691" width="200" height="200" style="opacity: 1;"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/808110-600x800.jpg" id="thumb2" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 2"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/808110-200x200.jpg" alt="IMG_9694" title="IMG_9694" width="200" height="200" style="opacity: 1;"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/876022-600x800.jpg" id="thumb3" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 3"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/876022-200x200.jpg" alt="IMG_9690" title="IMG_9690" width="200" height="200"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/823734-600x800.jpg" id="thumb4" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 4"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/823734-200x200.jpg" alt="IMG_9692" title="IMG_9692" width="200" height="200"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/246168-600x800.jpg" id="thumb5" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 5"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/246168-200x200.jpg" alt="IMG_9685" title="IMG_9685" width="200" height="200"></a>
      <div class="clr"></div>
   </div>
</div>

我想做的是两件事:

• 移除图片的灰色容器。我在检查元素中找不到它
• 我不想触摸#main-pic，我只想将所有#thumbs-pic 对齐为main-pic 下方的缩略图 像这样水平放置

我知道如果我删除

img{
  max-width: 100%;
  height: auto;
}

a.post-gallery img {
    vertical-align: middle;
    margin-right: 5px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
}

一半的问题都解决了，就是不知道怎么解决另一半。我尝试了 display-block 之类的东西，无法得到准确的结果

Answer 1

这是一个解决方案。首先在div#thumbs-pic 上设置display:flex。为这个 flexbox 中的图像或 flex-item 分配一个合适的宽度(我使用 82px)。灰色背景在 .content_res div.bigleft 中。我将其更改为透明并使用 !important 声明以确保它不会在其他地方被覆盖。 html不变。这是完整的片段:

div#main-pic {
    padding: 7px 7px 0;
}
.content_res div.bigleft {
	float: left;
	margin-top: 20px;
	width: 40%; /*240px*/
	background-color: transparent !important;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
}

div#thumbs-pic {
    padding: 7px;
    display:flex
}

div#thumbs-pic img {
  width:84px;
}

img{
  max-width: 100%;
  height: auto;
}

a.post-gallery img {
    vertical-align: middle;
    margin-right: 5px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
}

<div class="bigleft">
   <div id="main-pic">
      <a href="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-440x800.jpeg" class="img-main cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL"><img class="img-responsive" src="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-440x800.jpeg" title="1492443192175" alt="1492443192175"></a>
      <div class="clr"></div>
   </div>
   <div id="thumbs-pic">
      <a href="http://www.jokerleb.com/wp-content/uploads/2017/05/462104-480x800.jpg" id="thumb1" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 1"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/462104-200x200.jpg" alt="IMG_9691" title="IMG_9691" width="200" height="200" style="opacity: 1;"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/808110-600x800.jpg" id="thumb2" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 2"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/808110-200x200.jpg" alt="IMG_9694" title="IMG_9694" width="200" height="200" style="opacity: 1;"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/876022-600x800.jpg" id="thumb3" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 3"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/876022-200x200.jpg" alt="IMG_9690" title="IMG_9690" width="200" height="200"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/823734-600x800.jpg" id="thumb4" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 4"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/823734-200x200.jpg" alt="IMG_9692" title="IMG_9692" width="200" height="200"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/246168-600x800.jpg" id="thumb5" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 5"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/246168-200x200.jpg" alt="IMG_9685" title="IMG_9685" width="200" height="200"></a>
      <div class="clr"></div>
   </div>
</div>