0

我一直在做一个项目，我必须将 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>
4

4 回答 4

1

我想补充一下 MathSquared11235 的答案。它总是有助于重置边距和填充。让我再说一遍......它总是有助于重置边距和填充。不同的浏览器有不同的默认边距和内边距，如果不重新设置，就不可能让你的网站在所有浏览器中看起来都一样。这也可能是您当前使用的浏览器所面临的问题，可能会“添加”不需要的边距或填充。并且不要只在特定元素上重置它们，例如建议的“div”。我建议把它放在你的css的顶部......

// * { 边距：0; 填充：0；}

星号 (*) 仅表示“一切”。因此，在您自己添加之前，所有内容的边距为 0，填充为 0。是的，您需要为每个元素添加所需的边距和填充......但这是一件好事，而不是让浏览器单独为您决定。

我希望这有帮助。

于 2013-01-16T03:04:52.440 回答
0

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

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

// 相关代码：

 .LeftTable 
   {
     float: left;
   }

  .RightTable 
  {
    float: left;
    width: 400px;
  }
于 2013-01-16T02:28:05.707 回答
0

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

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

于 2013-01-16T02:31:15.743 回答
-1

如果您使用的是 Internet Explorer，请知道它非常有问题。我的意思是非常故障。我在另一篇 SO 帖子上读到，不幸的是，我现在找不到，您的故障原因可能是 HTML 中的换行符，IE非常有用地认为是您想要放入文本中的排版空间。

另外，你可能会做

div {margin: 0; padding: 0;}

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

希望这可以帮助！

于 2013-01-16T02:22:11.603 回答