2

我正在一个布局相当简单的测试站点上工作。它被分成具有交替宽度的两列的行。我的问题是,无论出于何种原因,插入其中一个列 div 的图像没有占据 div 的 100% 高度。它短了几个像素。这是一个问题,因为同一行中的两列需要看起来“等高”。

我在其中一个有图像问题的 div 上放置了一个红色背景,这样您就可以轻松地看到我在说什么。我确信它相当简单,我只是忽略了一些东西,但是在这个星期一早上我似乎找不到它。任何帮助将非常感激。谢谢!

这是我的测试站点:http ://hartsfielddesign.com/test2/test.html

4

6 回答 6

11

由于内联文本大小/行高,有时内联图像在底部有额外的填充。

将带有图像的 div 设置为

font-size:0;
line-height:0;

http://jsfiddle.net/pxfunc/ZC7Xa/1/

编辑:

或者,将 设置<img />display:block;以便不应用内联填充

http://jsfiddle.net/pxfunc/ZC7Xa/3/

于 2012-09-10T17:24:20.187 回答
3

尝试添加vertical-align:top到您的图像规则:

img{
    max-width: 100%;
    width: 100%;
    vertical-align:top;
}

jsFiddle 示例

于 2012-09-10T17:27:47.937 回答
0

如果我正确理解您要完成的工作,您可以在<div class="product clearfix color-box">元素上设置一个高度值,200px例如,然后将.vendorand.vendor-images以及其中img包含的内容设置为height: 100%

于 2012-09-10T17:21:13.403 回答
0

您的图像纵横比错误。它太长了。

您可以做的更简单的事情是将 .vendor-images 图像作为背景,而不是使用 img 标签。然后你可以把它拉长,这样它就不会给你那个错误。

您还可以将左侧的小图像设置为 float:left 值和右侧的 float:right,并在左侧使用 30% 的宽度,在右侧使用 65% 的宽度。不设置填充,剩余的 5% 将为您提供填充。

或者您可以简单地更改图像的纵横比。

于 2012-09-10T17:27:56.250 回答
0

删除类 .box-expand、.color-box-expand 边距和填充。然后设置每个 div 的高度。然后它将正常工作。

于 2012-09-10T17:28:25.940 回答
0

这段代码对我来说 100% 有效。

font-size:0;
line-height:0;

把它放在 img 标签的父级上。

于 2020-10-27T09:14:30.467 回答