Question

我试图用HTML和CSS制作网格系统但是当我向系统添加一些图像时，它们中的一些跳转（我认为这是因为像素不匹配）并且当我调整窗口大小时（因为它也应该是响应）他们排队有点搞笑，我不明白我的问题在哪里。所以我请你帮忙。这是我工作中的JSFiddle。

我认为我应该修改这一行以使其有效但我不确定。

Answer 1

问题是margin以像素为单位，width位于%。所以15％* 5 + 23 * 5> 100％的屏幕。

您需要将保证金转移到％，以便总和始终为100。

15*5 = 75;  
remaining space for margins = 25% / 5 = 5 for each box

所以将列样式更改为

.column{
  margin:23px 2.5%'
 }

转移问题

查看代码：

每个p都有一个背景

 #farbig_logo_mercedes {
 background: url(http://www.seat-styler.de/wp-   content/uploads/2017/02/Mercedes_logo_ori.png) no-repeat center top;

}

表示图像为全尺寸，仅移动前65个像素，并且居中对齐。

且同一p个孩子img具有相同的src

<img class="logos_bild alignnone" src="http://www.seat-styler.pl/wp-content/uploads/sites/7/2017/02/Mercedes_logo_edit.png" alt=" Mercedes Logo" width="65" height="65">

具有特定的高度和宽度，图像调整为65x65 sqaure。

这是显示的图像。在悬停时，img标签的不透明度设置为0，使背景图像显示。

当这两个图像的对齐方式不同时，您的图标会在悬停时跳舞。

建议不要使用两个图像，一个用于bg，另一个用作src，特别是在这样的响应式设计中。

如果您想使用两张图片，请使用两者作为background

 p{
  background-image:url(1)
  }
p:hover{
   background-image:url(2)
  }

或者您可以在img

上使用过滤器

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: sepia(100%);
opacity:0.5
 }
 img:hover{
filter:none;
opacity:1
}

列第2列

这是因为.farbig_logo_ford的高度高于其他人; 添加

 .column{ max-height:113px;}

还考虑使用flex

  .row{ display:flex; flex-wrap:wrap;}
  .column{width:15%;}

删除浮动

https://jsfiddle.net/pmzg1nbu/3/

试图修复css和html一起工作

1 个答案: