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;
}

DEMO

没有边距，没有并排的图像

1 个答案: