html - 不能并排放置没有边距的表格图像

Question

我有 Excel 表格的图像，我必须将其添加到 HTML 页面上。我有 6 张图片，其中前四张不需要并排(但不需要它们之间有空间)，但最后两张必须并排(它们之间没有边距)，因为该表是最初是横向模式。我尝试过不同的方法，但都不起作用。我正在使用 HTML 和 CSS。代码如下。任何帮助将不胜感激。我正在使用 Eclipse Juno 进行开发。

 //***Html file

 <div class="crop">
   <img src ="QATables/image1.png">
   <img src ="QATables/image2.png">
   <img src ="QATables/image3.png">
   <img src ="QATables/image4.png">     
   <img src ="QATables/image5.png" border="0"><img src ="QATables/image6.png" border="0"/>


 </div> 

  //*****CSS file

  .crop img {width:850px; height:791px; margin: 0px;border-bottom:0}

Answer 1

添加两个可用于样式设置的类，一个用于不应并排的样式，一个用于应并排的样式。

<div class="crop">
   <img src ="QATables/image1.png" class="vertical">
   <img src ="QATables/image2.png" class="vertical">
   <img src ="QATables/image3.png" class="vertical">
   <img src ="QATables/image4.png" class="vertical">     
   <img src ="QATables/image5.png" class="horizontal">
   <img src ="QATables/image6.png" class="horizontal">
</div>

然后你做这样的事情:

.vertical {
    margin-bottom: 10px;
    display: block; /* Force images to be shown vertically */
}

.horizontal {
    float: left;
}

DEMO