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

Question

我有必须在 HTML 页面上添加的 Excel 表格的图像。我有 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;
}

演示