Question

我一直致力于一个项目，我必须将excel表的图像放在一起。它应该看起来像所有图像中的唯一表格，其中最后两个应该是并排的。我试着写一些东西，但是图像之间的空间和最后两幅图像之间的边距让我头疼。非常感谢您的帮助。

  //***CSS file

  .crop img 
   {
    height: 791px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    width: 850px;
    display: block;
   }
  .LeftTable 
   {
     float: left;
   }

  .RightTable 
  {
    float: right;
    width: 400px;  //when increasing over 400px, the image on right gets closer but goes underneath of the one on left side.
  }


  //**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">
      <div class="LeftTable">
         <img src="QATables/image5.png">
      </div>
      <div class="RightTable">
         <img src="QATables/image6.png">
      </div>
  </div>

Answer 1

我想补充一下MathSquared11235的答案。重置边距和填充总是有帮助的。让我再说一遍......它总是有助于重置边距和填充。不同的浏览器具有不同的默认边距和填充，如果您不重置它们，将无法使您的网站在所有浏览器中看起来相同。这也可能是您目前面临的问题，因为您正在使用的浏览器，可能会添加＆＃34;不需要的边距或填充。并且不要在特定元素上重置它们，例如建议的＆＃34; div＆＃34;。我建议把它放在你的CSS的顶部...

// * {margin：0;填充：0; }

星号（*）仅表示＆＃34;一切＆＃34;。所以一切都有0的余量和0的填充，直到你自己添加它。是的，您需要为每个元素添加所需的边距和填充...但这是一件好事，而不是允许浏览器单独为您决定。

我希望这会有所帮助。

Answer 2

我不确定我完全明白你在做什么，但我已经尽力回答了这个问题。如果我误解了，请澄清，我会再试一次。

假设您只是想确保最后一个图像与倒数第二个图像完美对齐，您可以直接从右向左更改浮动，这里是一个jsfiddle：http://jsfiddle.net/mcabrams/qB9fA/

//相关代码：

 .LeftTable 
   {
     float: left;
   }

  .RightTable 
  {
    float: left;
    width: 400px;
  }

Answer 3

你需要设置.crop{ width: 1700px; }和.right{ float: left; }，因为没有空间可以将它放在img左边。

jsfiddle：http://jsfiddle.net/2usCh/

Answer 4

如果您使用的是Internet Explorer，请知道它非常糟糕。我的意思是非常小故障。我读了另一篇SO帖子，遗憾的是，我现在找不到，你的故障的原因可能是HTML中的新行，IE 非常有帮助认为是你要放入的印刷空间文本。

另外，你可能会这样做

div {margin: 0; padding: 0;}

如果您的布局允许。它将删除图像周围的任何空间。

希望这有帮助！

无法摆脱空间和图像之间的边距

4 个答案: