Div尺寸不匹配且自动高度问题

Question

在现场为一个遇到愚蠢问题的学校项目工作。

http://jmtestserver.net46.net/

1）首先我想知道，我在带有纹理背景的div上的高度设置为手动PX。我希望将它设置为auto，因为我正在使这个响应，所以我希望它随盒子div增长和缩小。但是，如果我将其设置为auto，则看起来像这样

http://i.imgur.com/AWFmiOM.png

我不明白盒子div为什么不推倒它？

2）正如你所看到的那样，右侧的2个方框比左侧的2个方框更向下。我不明白为什么这是因为盒子使用与颜色完全相同的css而且图像尺寸完全相同。所以我无法弄清楚为什么他们不会在高度上匹配。

提前谢谢！我知道这些都是简单的事情，但它们给我带来了很多麻烦！

Answer 1

如果您检查网页，您会发现图片的大小不同。您可以通过更改main.css强制它们。修改.photo_icon，如下所示：

.photo_icon {
    width: 50%;
    margin-top: 1%;
    height: 99px; /* This line */
}

Answer 2

1）您的页脚问题＆＃34;浮动＆＃34;在你的盒子后面跟＆＃34; float：left;＆＃34;在你的盒子上。你的盒子之后的元素基本上会忽略盒子，好像它们不存在一样。要解决这个问题，只需添加清楚：两者;浮动发生后的一个元素。

您可以在此处详细了解：Float

#bottom-section {
    clear: both;
}

2）更大的盒子与你的图像尺寸不一样，要么找到/制作相同高度的图像，要么添加一个高度值.photo_icon

.photo_icon {
    height: 50px;
}

Answer 3

1. 问题：第3和第4个方框中的图标较大（高度为98px，前两种情况为55px）。

2. 问题：框具有不同高度的内容，并且与其内容具有完全相同的高度。正如我所说，第3和第4个框中的内容高于前两个框。

<强>解决方案：
将图标调整大小/裁剪为相同尺寸（高度）。如果您添加.photo_icon {height: 55px;}，您会发现它可以正常使用尺寸合适的图标。

Answer 4

图片的高度不一样。如果你制作相同的尺寸，或添加类似

的东西

身高：101px;

到.photo_icon类，它会解决问题