html - 尝试修复 css 和 html 以协同工作

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 的正方形。

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

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

建议不要使用两张图片，一张放在背景中，另一张作为 src，尤其是在像这样的响应式设计中。

如果你想使用两张图片，使用both作为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%;} 

去除 float

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