我正在一个布局相当简单的测试站点上工作。它被分成具有交替宽度的两列的行。我的问题是,无论出于何种原因,插入其中一个列 div 的图像没有占据 div 的 100% 高度。它短了几个像素。这是一个问题,因为同一行中的两列需要看起来“等高”。
我在其中一个有图像问题的 div 上放置了一个红色背景,这样您就可以轻松地看到我在说什么。我确信它相当简单,我只是忽略了一些东西,但是在这个星期一早上我似乎找不到它。任何帮助将非常感激。谢谢!
我正在一个布局相当简单的测试站点上工作。它被分成具有交替宽度的两列的行。我的问题是,无论出于何种原因,插入其中一个列 div 的图像没有占据 div 的 100% 高度。它短了几个像素。这是一个问题,因为同一行中的两列需要看起来“等高”。
我在其中一个有图像问题的 div 上放置了一个红色背景,这样您就可以轻松地看到我在说什么。我确信它相当简单,我只是忽略了一些东西,但是在这个星期一早上我似乎找不到它。任何帮助将非常感激。谢谢!
由于内联文本大小/行高,有时内联图像在底部有额外的填充。
将带有图像的 div 设置为
font-size:0;
line-height:0;
http://jsfiddle.net/pxfunc/ZC7Xa/1/
编辑:
或者,将 设置<img />
为display:block;
以便不应用内联填充
如果我正确理解您要完成的工作,您可以在<div class="product clearfix color-box">
元素上设置一个高度值,200px
例如,然后将.vendor
and.vendor-images
以及其中img
包含的内容设置为height: 100%
您的图像纵横比错误。它太长了。
您可以做的更简单的事情是将 .vendor-images 图像作为背景,而不是使用 img 标签。然后你可以把它拉长,这样它就不会给你那个错误。
您还可以将左侧的小图像设置为 float:left 值和右侧的 float:right,并在左侧使用 30% 的宽度,在右侧使用 65% 的宽度。不设置填充,剩余的 5% 将为您提供填充。
或者您可以简单地更改图像的纵横比。
删除类 .box-expand、.color-box-expand 边距和填充。然后设置每个 div 的高度。然后它将正常工作。
这段代码对我来说 100% 有效。
font-size:0;
line-height:0;
把它放在 img 标签的父级上。